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1. Forma y composición gráfica 


1.1. La composición visual 





1] = 








E E 


El compositor musical combina y ordena los sonidos para crear una composición. Su 
trabajo responde a lo que quiere expresar y/o comunicar, a la adecuación o no a los 
cánones marcados por la tradición, y al gusto y los intereses propios de su época. 











Vassili Kandinsky. Composición VIII (1923) 

Oleo sobre tela. 140 x 201 cm 

Propiedad: Solomon R. Guggenheim Museum, Nueva York 

© V. Kandinsky 1923, VEGAP. Esta imagen se reproduce acogiéndose al derecho de cita o reseña (art. 32 LPI), y está excluida de 
la licencia por defecto de estos materiales. 


Cita 


"Desde el principio, esa única palabra composición, resonó en mi cerebro como una 
) 
` " 
plegaria. 


Vassili Kandinsky. Miradas al pasado (ed. original 1918). 
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"Las expresiones de sentimientos que se han ido formando en mi interior de forma si- 
milar (...) que, después de los primeros bocetos preliminares, he estudiado y trabajado 
lentamente, de una forma casi pedante: es el tipo de obra que yo llamo composición. (...) 
al final yo me inclino por los sentimientos más que por los cálculos." 


Vassili Kandinsky (1998). De lo espiritual en el arte: contribución al análisis de los elementos 
pictóricos. Barcelona: Ediciones Paidós Ibérica, S. A. 


Puede hacerse un paralelismo entre la música y las artes visuales y decir que la 
combinación de elementos gráficos forma una composición visual de forma 
análoga a como la combinación de notas y estructuras musicales forman una 
composición sonora. De hecho el uso habitual del término en el grafismo tiene 
su origen en el interés mostrado por músicos y pintores (Kandinsky entre ellos) 
en las analogías entre lenguaje musical y visual en las primeras décadas del 
siglo XX. 


El creador gráfico dispone de un amplio repertorio de elementos visuales y de 


un sinfín de combinaciones para componer imágenes. 


Los criterios de composición varían según las intenciones del autor y el perío- 
do histórico. En el uso del color, la forma o la disposición y ubicación en el 


espacio, intervienen factores culturales y hallazgos artísticos. 


IRA 
e WA 


NO 


wA 





Abside de Sant Climent de Taüll (Pirineo catalán); un conocido ejemplo de pintura románica de la primera 
mitad del siglo xıl. 

Actualmente la pintura original está en el Museu Nacional d'Art de Catalunya (MNAC) en Barcelona dónde 
fue trasladada durante los trabajos de protección del patrimonio románico que llevó a cavo la Junta de 
Museos entre los años 1919 y 1923. 

© Fotografía de dominio público The Yorck Project. 
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"En la pintura, las épocas dominadas por criterios de representación simbólica y no natu- 
ralistas, como la Edad Media, favorecen el establecimiento de jerarquías entre las figuras 
por medio de su ubicación en el conjunto (las más importantes se colocan en el centro 
de la composición) o de su tamaño (las figuras serán más grandes o más pequeñas según 
su importancia simbólica, con independencia de su tamaño real)". 


José Maria Faerna García-Bermejo; Adolfo Gómez Cedillo (2000). Conceptos fundamentales 
de arte. Madrid: Alianza Editorial. 


El lenguaje visual es un lenguaje abierto, no tan codificado y estructu- 
rado como el lenguaje verbal. La gramática visual es, por lo tanto, un 


ámbito para la experimentación. 


1.2. El marco de la imagen 


1.2.1. ¿Por qué un marco para la imagen? 











Q 


El marco de una imagen 


Cuando se habla de composición visual implícitamente se sobreentiende que 
se están organizando una serie de elementos gráficos dentro de un marco. Esto 
no tendría por qué ser así y, de hecho, el marco de la imagen es una invención 
cultural relativamente reciente como han señalado algunos autores. Citando 


a Romà Gubern: 


"El marco rectangular de la pintura occidental, que heredarán luego la fotografía y el ci- 
ne, vulnera (...) de un modo flagrante el formato y las características de la visión natural, 
a pesar de lo cual no nos extraña ni perturba, porque es una convención cultural sóli- 
damente arraigada en nuestro contexto y con la que nos familiarizamos desde nuestra 
infancia. Esta convención se consolidó a partir del siglo XIV, en conexión con la lineali- 
dad de la perspectiva geométrica, en armonía con el formato rectangular de las paredes 
(soportes pictóricos) y de las ventanas de las casas, del formato de las páginas de los libros 
que se ilustraban y del formato del escenario teatral." 


Roma Gubern (1987). La Mirada Opulenta. Barcelona: Editorial Gustavo Gili. 
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El marco, sea rectangular o no, es una forma que contiene la imagen y como 
tal tiene su esqueleto estructural que interfiere en las relaciones entre sus ele- 
mentos gráficos. Esta relación, inevitable, a menudo pasa desapercibida al ob- 
servador, que se zambulle dentro de la imagen aislándola del resto mediante 


el marco. 


Kandinsky: entrar en la composición 


Sobre la actitud de observación externa o interna de una composición comenta Kan- 
dinsky: 


"La calle puede ser observada a través del cristal de una ventana, de modo que sus ruidos 
nos lleguen amortiguados, los movimientos se vuelvan fantasmales y toda ella, pese a la 
transparencia del vidrio rígido y frío, aparece como un ser latente, del otro lado. O se 
puede abrir la puerta: se sale del aislamiento, se profundiza en el ser-de-afuera, se toma 
parte y sus pulsaciones son vividas con sentido pleno (...) Del mismo modo la obra de 
arte se refleja en la superficie de la conciencia (...) También aquí hay un cierto cristal 
transparente.(...) También aquí existe la posibilidad de penetrar en la obra, participar en 
ella y vivir sus pulsaciones con sentido pleno". 


Vassili Kandinsky (1984). Punto y línea sobre el plano (ed. original 1926). Barcelona: Edi- 
torial Labor. 





Observa cómo cambia una composición con los mismos colores y elementos gráficos en función del marco. La primera usa una 
proporción de marco de 3 x 4. La segunda de 4 x 3. La tercera un marco redondo. 
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1.2.2. Marcos y ventanas en los ordenadores 


B 7003-14-Desembre_ Andorra 


Breo Dicón Ve Firraba Henri Ayuda 


Que z ej F Diii E inam Ei- ad SON de Capel 
Cdi nara Poca Dra 2000 i ra Arda = Eb 
Capitini K 
E 13 D0 itii Ania 
t 3 r nemire a Dusia aja Victor 
1 200-0- Campie Frances Petete 
O 20042601 Sopir Lia fi 
2) m-n Meda cura icha 
0) Aii brir Capi iah 
CO 2000-31 Cebra Piy Caa Vir 
E 1 2004-00 Gare Arha 
Co 20000 duro: da Eva Plá j 
LA AA re oda Eva Rad TT 
Ci Dow begi kea i El Andora 
2040 Feru Pepek ond 
DEH -B a Pas Ber Biba Can 
DO l Miori 
2004-11-Sebembre_Wela 
2004-13 Ju 0 Montado 
2004-14 od Crd 


(1 C4G1554,.4P6G - ASe Photo Manag 2009 


Neper + AA 
EN: A 


a 5 


3 S2 OMA SNAZI iO A e Farha de pedfcación: AANA O 
[aa OMAP ELOD ISOLDA peg Pecha de modificación: DEJOA (ZOO) 17:76:4 


¿inicio 


Iconos, ventanas y menús en el sistema operativo MS-Windows. 


La interfaz habitual para el sistema operativo y las aplicaciones en la mayoría 


de ordenadores es la conocida como WIMP (Windows, Icons, Menus, Pointer)”. 


Este tipo de interfaz, que utiliza metáforas del mundo físico externo al orde- 
nador, es heredero de las investigaciones realizadas a principios de la década 
de los setenta del siglo XX en el Centro de investigaciones de Palo Alto de 
Xerox (Xerox-PARC). El símil elegido fue el del trabajo en la oficina (escrito- 
rio, Carpetas, documentos, papelera, etc.). A finales de la misma década se in- 
corpora en los ordenadores de Apple Computer como primeros ordenadores 
personales comerciales con interfaz gráfica y en 1984 se define y consolida 
en el sistema operativo de los Apple Macintosh. En 1989 los mismos códigos 
gráficos se aplican a la interfaz del sistema operativo Windows de Microsoft; 
que será durante mucho tiempo el más extendido entre los ordenadores per- 
sonales. Entre 1996 y 1997 arrancan dos proyectos de escritorio para sistemas 
Unix (KDE y Gnome) basados en los mismos principios que con el tiempo se 


convertirán en los más usados entre las distribuciones de Linux. 


Una de las características de este modelo es la posibilidad de abrir ventanas que 
nos muestran fragmentos de información: desde la estructura de directorios, 
los archivos y las aplicaciones hasta las imágenes, textos o cualquier tipo de 
documento con el que podemos trabajar dentro de la ventana. De esta forma, 
al marco rectangular del monitor se le incorporan los marcos rectangulares de 


las ventanas del sistema operativo. 











Dies a o 
( Siglas inglesas de ventanas, ico- 
nos, menús y puntero. 
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Algunos productos interactivos, concretamente aplicaciones sobre CD-ROM 
de los años noventa, pretendieron romper este marco rectangular sustituyén- 
dolo por marcos de variadas formas sobre un fondo negro. Los navegadores de 
Internet vuelven a hacer importante el marco como ventana de exploración 


que incorpora sus propios botones de control. 


La llamada realidad virtual también ha pretendido borrar los marcos de la 
imagen ofreciendo al usuario-participante una experiencia inmersiva a través 
de sistemas que modifican el punto de vista a partir del movimiento de la 


cabeza. 
1.2.3. Las proporciones del marco 


Los intentos de superar el marco de la imagen son legítimos e interesantes. 
Pero la existencia del marco supone también un reto para la composición de 


la imagen el cual ha dado valiosas soluciones. 


Su forma y proporciones son un elemento determinante de la composición. 


"En algunos periodos de la historia (...), en particular en el Renacimiento y en el siglo 
XVII, se usaron sistemas geométricos para (...) determinar las proporciones del área de la 
pintura.” 


Maurice de Sausmarez (1983). Diseño Básico; dinámica de la forma visual en las artes plás- 
ticas (ed. original 1964). Barcelona: Gustavo Gili. 


Rectángulos estáticos Rectángulos dinámicos 








Rectángulos estáticos: Proporciones basadas en números simples que producen rectángulos estáticos. 
Puedes cambiar los valores para cambiar la proporción. 

Rectángulos dinámicos: Proporciones basadas en números irracionales que producen rectángulos 
dinámicos. Puedes cambiar el valor para cambiar la proporción. 


Los formatos convencionales para la interfaz gráfica del ordenador (640x480, 
800x600, 1024x768, 1280x1024...) derivan de la proporción 4:3 del monitor 
clásico de televisión. Es, por lo tanto, un marco basado en un rectángulo es- 


tático. 
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1.2.4. Sección áurea; la proporción armónica 


La llamada sección áurea es un tipo de proporción usada por los griegos y 
después por los renacentistas que se encuentra en múltiples ocasiones en las 
formas naturales. Se considera una proporción armónica y ha sido usada tanto 


en las artes gráficas como en la arquitectura y la escultura. 


A continuación se muestran paso a paso los procedimientos para obtener la 
división de una recta según dicha proporción y para crear un rectángulo ba- 


sado en ella. 


La sección áurea 


Paso 1 Paso 2 Paso 3 Paso 4 








División de una recta A-B utilizando la proporción áurea 


1) Se traza una recta perpendicular a uno de los extremos (B) que mida la mitad 
de la recta original (AB/2). 


2) Se une el extremo opuesto (P) de la nueva recta con el otro extremo (A) de 


la recta original formando un triángulo. 


3) Con el compás en el punto P y pasando por B, se traza un arco que corte 
la hipotenusa del rectángulo. 


4) Con el compás en el punto A y pasando por la intersección entre el arco 
anterior y la hipotenusa se traza un arco que divide la recta original (AB) en 


dos segmentos que guardan la proporción áurea entre sí. 
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Sección áurea a partir de un cuadrado (ABCD) 








ER 


¿Tra par iaa TEE EEE 


co 42 i R D 





a 


Producción de un rectángulo de sección áurea a partir de un cuadrado (ABCD) 


1) Dividid el cuadrado verticalmente por la mitad. 


2) Pinchando el compás en la mitad de la base y pasando por el vértice superior 


derecho (B) trazad un arco hacia abajo. 


3) Prolongad los dos segmentos horizontales del cuadrado (AB y DC) hasta que 


la base se intersecte con el arco. En ése punto trazad una línea perpendicular 


que completa el rectángulo. 


1.3. Retículas 


1.3.1. Retículas por repetición de módulos 
¿Cómo organizar la composición dentro de un marco? 


Puede usarse simplemente la intuición pero también existen recursos metodo- 
lógicos. El diseñador gráfico suele usar retículas que ayudan a crear una com- 
posición coherente. 


Las retículas son estructuras que se usan en el proceso de trabajo pero invisibles 
en el resultado final. En éstas se ajustan los elementos gráficos. Las retículas 
pueden estar basadas en la repetición de módulos gráficos o estar formadas por 
líneas que diagraman el espacio sin formar elementos iguales. En la siguiente 


tabla se muestran las retículas derivadas de la repetición de módulos a partir 


de la clasificación que de ellas ha hecho Wucius Wong”: 





Wong, 1989. 
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Ejemplos de retículas según Wucius Wong 


| Superposición de 
AE A Variaciones del Estructuras de 
Enrejado básico “enrejado básico múltiple repetición aos 


Subdivisiones cuadradas de igual medida resultado de trazar líneas verticales y horizontales, 
parejamente espaciadas, que se cruzan entre sí. Las direcciones verticales y horizontales quedan 
equilibradas, sin un dominio fuerte de una sobre la otra. 





Uso del enrejado básico en el diseño web 
Veamos la aplicación de retículas en el diseño para web a través de un caso práctico. 


El sitio web del Museu de la Vida Rural, un proyecto desarrollado por el estudio de diseño 
lamosca con la Fundació Lluís Carulla (antes Fundació Jaume I) como cliente. 


En esta web se ha usado una retícula cuadriculada que respondería al "enrejado básico" 
definido por Wucius Wong. 


La retícula sirve para organizar la composición global del interfaz siendo usada como 
pauta para las franjas horizontal y vertical que están siempre presentes. 


También se usa la retícula para posicionar el resto de elementos como son las secciones 
básicas del sitio web (informació, el museu, escoles, novetats), los textos, las fotos, los 
botones "entrar" y "tornar". En la sección "El Museu" sirven para situar el menu por plantas 
y por zonas y para organizar el índice de piezas. 


En algunos casos la retícula invisible se hace visible a través de líneas blancas disconti- 
nuas. 


 AEEEEA- a 
a 





Sitio web: MVR. Diseño: lamosca 
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a) Retícula enrejado básico. Retícula sobre la estructura básica que usan todas las páginas 
web del sitio. Las bandas vertical y horizontal, las áreas de color y el espacio para imágenes 
se ajustan a la retícula. 


b) Página de inicio. Aparte de la estructura básica, también los textos y los botones de 
navegación se han dispuesto a partir de la retícula. Esta "se hace visible" parcialmente en 
las líneas blancas discontinuas. 


c) Página interna: planta 1 del museo. En la banda vertical aparecen las distintas plantas 
del museo y en la horizontal los espacios de la banda seleccionada. Todo se ajusta a 
la retícula. Al lado del dibujo de la planta la retícula se hace visible como menú para 
visualizar las piezas expuestas en cada espacio. 


Retículas en la Alhambra 


La Alhambra de Granada es un catálogo arquitectónico de estructuras de múltiple 
repetición en sus ornamentaciones y pavimentos. 


A continuación se muestra paso a paso la construcción de una malla aparentemente 
compleja a partir de una estructura relativamente simple de rectángulos. Es sólo uno 
de los múltiples ejemplos de retículas geométricas que la cultura islámica ha dado a la 
humanidad y que podemos encontrar en las paredes de la Alhambra y en otros tantos 
edificios y elementos decorados. 








Paso 1: Partimos de una retícula de rectángulos dispuestos en alineaciones verticales. 
Paso 2: Se ha duplicado la retícula y se le ha aplicado una rotación de 60° hacia la derecha. 


Paso 3: Se ha duplicado de nuevo la retícula vertical y se le ha aplicado una rotación de 
60° hacia la izquierda. Ya tenemos la estructura de la malla. 


Paso 4: Cuando se unifica el color de las líneas la percepción de las retículas de rectán- 
gulos se disimula y pasa a un segundo plano. Destacan las estructuras enlazadas de líneas 
que forman estrellas de seis puntas en sus intersecciones y hexágonos cruzados por tres 
calles. 


Paso 5: Se ha conseguido un espacio teselado; coloreando las piezas resultantes pueden 
obtenerse diseños de repetición muy variados. 


1.3.2. Retículas basadas en las proporciones del marco 


Otra opción es optar por divisiones del plano de la composición derivadas de 
las proporciones y estructura del marco. Se trazan divisiones del marco que 
van creando una malla o diagramación del espacio de la composición. Estas 


líneas sirven como estructura para situar los elementos gráficos. 


Esta técnica es ampliamente utilizada por los pintores renacentistas y también 
en las artes del libro. Posteriormente será recuperada por los grafistas moder- 


nos. A continuación se muestran algunas divisiones posibles. 
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Divisiones del área de un 
cuadrado 


Divisiones del área de un 
circulo 


Divisiones del área de un 
triángulo 


Divisiones del área de un Pi l 
rectángulo aurico | Sólo algunas de las posibles 








Algunas divisiones posibles en función del marco 





h 


En esta composición la disposición de elementos gráficos se basa en la diagramación obtenida con las 
divisiones del rectángulo áurico. La estructura subyacente transmite armonía a la composición. Pulsad el 
botón para ver la diagramación superpuesta. 


1.3.3. Diagramación basada en columnas de texto 


El diseño editorial orientado a prensa diaria y a la maquetación de revistas 
periódicas requiere de un sistema de diagramación de página ágil, que acepte 
cambios en la cantidad de texto y en el tamaño de fotografías y titulares. A 
la vez el ajuste de todos estos elementos tiene que hacerse de forma rápida 


y eficaz. 


Para responder a esta situación la mayoría de periódicos utilizan un sistema de 
diagramación basada en columnas verticales de texto. La página se divide en 
seis columnas, cinco columnas, cuatro columnas o tres columnas. El texto se 


dispone en ellas y las imágenes y titulares también encajan en dicha estructura. 
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Diagramación Ejemplo 








lumnas. 


BRUH 
p 


i 


nj 4 
A hr 1 Y 
uwviagramacion : 
E 


Ejemplo de diferentes diagramaciones y combinaciones. Por ejemplo, en una diagramación de seis columnas el texto puede 
ocupar cuatro columnas delgadas más una columna más gruesa resultado de la unión de dos columnas de la diagramación. 
Un titular puede ocupar el espacio de cuatro columnas y una foto insertarse entre dos columnas de texto. También pueden 
usarse dos diagramaciones en una misma página. Por ejemplo, una parte de la página se basa en una diagramación de cinco 
columnas y otra en una de tres. 





1.4. Efectos compositivos 


1.4.1. Contrastes compositivos 


El contraste tiene gran importancia en la composición. Una composición am- Ved también 


bigua, por ejemplo en cuanto a equilibrio, produce una sensación visual con- 
o a . A as Más información sobre las le- 
fusa. Nuestra percepción intenta corregirla, a través de la nivelación y el agu- yes de la Gestalt en el aparta- 
do "Psicología de la percep- 
ción" en el módulo "Percep- 
ción visual". 


zamiento de las leyes de la Gestalt. 











En la comunicación visual, a menos que nos interese provocar este efecto en el 
observador, tendremos que contrastar la composición desplazándonos hacia 
uno de los dos polos (equilibrado o inestable, por ejemplo). 


Donis Dondis ha definido diecinueve tipos de contraste compositivo basados 


Referencia bibliográfica 





en pares de conceptos que se configuran como polos contrapuestos. Cada polo 
Donis Dondis (1973/1998). 


La sintaxis de la imagen. Intro- 


las composiciones cuyo efecto es intermedio o ambiguo. ducción al alfabeto visual. Bar- 
celona: Gustavo Gili. 


es un extremo en cuanto a efecto compositivo. Entre un polo y otro estarían 
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Contrastes compositivos según D. Dondis 


Equilibrio - Inestabilidad 


Simetría - Asimetria 
Regularidad - Irregularidad 
Simplicidad - Complejidad 


Unidad - Fragmentación os 


Economía - Profusión 


Reticencia - Exageración O 
Predictibilidad - Espontaneidad Las composiciones equilibradas poseen un "centro de gravedad 
Actividad - Pasividad visual que sostiene pesos visuales equivalentes. Su contrario, la 
ausencia de equilibrio, es una composición inestable 


ODondis. Estas imágenes se reproducen acogiéndose al derecho de cita o reseña (art. 32 LPI), y están excluida de la licencia por 
defecto de estos materiales. 





Contrastes compositivos según D. Dondis 


Neutralidad - Acento Nu, 
Transparencia - Opacidad O O O 
Coherencia - Variación ja Kaa O C 
Realismo - Distorsión $ Y 
Plana - Profunda ) > 
Singularidad - Yuxtaposición Ó ez 


Secuencialidad - Aleatoriedad 


x La neutralidad consiste en buscar una composición con ausencia total 

Agudeza - Difusividad de provocación hacia el espectador. El acento consiste en realzar h 
: l una sola cosa en un contexto uniforme e inicialmente neutral. 

Continuidad - Episodicidad e dd 


ODondis. Estas imágenes se reproducen acogiéndose al derecho de cita o reseña (art. 32 LPI), y están excluida de la licencia por 
defecto de estos materiales. 

Lo realmente interesante es controlar la combinación de distintos tipos de 
contraste compositivo (por ejemplo, una imagen equilibrada y con sutileza, o 
bien, sutil y desequilibrada o equilibrada, sutil y predecible. 


1.4.2. Espacio y elementos compositivos 
Los verdaderos protagonistas de la composición (condicionados por el marco, 


organizados, si cabe, mediante retículas) son los elementos visuales. Su dis- 


posición es la que nos permite generar los contrastes tratados en el apartado 
anterior. 


A continuación se muestran algunas de sus características y los efectos que 


Referencia bibliográfica 





provocan. Para ello nos basamos en la clasificación de Maurice de Sausmarez. 


Maurice de Sausmarez 
(1973/1998). Diseño básico. 
Dinámica de la forma visual en 
las artes plásticas. Barcelona: 
Gustavo Gili. 
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Clasificación basada en la de Maurice de Sausmarez para las fuerzas espaciales 


Alternancia figura-fondo 
Diferencias de tamaño 
Relaciones lineales 
La forma 
Diferencias de valor 
El color 
La textura 


Clasificación de las fuerzas espaciales según Maurice De Sausmarez 


1.5. Transformaciones de la forma 





Este efecto se da cuando la distinción 
entre figura y fondo no es clara. En el 
ejemplo no se puede afirmar si la figura 
es el negro o el blanco; el sistema 
perceptivo no se decide y se van 
alternando. Esto nos demuestra que en 
el campo de visión nada es negativo, el 
espacio alrededor y dentro de la 
imagen es tan positivo como la 
propialmagen. 

Este fenómeno, que se da a menudo, 
también se explica por la llamada | 
relación entre forma y contraforma. 0 


Las transformaciones gráficas que apliquemos a los elementos visuales de la 


composición también juegan un papel en la interpretación del espectador. 


Diferenciamos entre transformaciones rígidas y deformaciones. 


Rígidas son aquellas transformaciones que nos permiten escoger dos puntos 


cualesquiera de la forma y que, una vez transformada la distancia entre ellos, 


sigue siendo la misma. En las deformaciones cualquier par de puntos no nos 


garantiza este resultado. Son rígidas las transformaciones siguientes: 


e Las reflexiones 
e Las traslaciones en el espacio 
e Las rotaciones 


e Cualquier combinación de ellas 


Transformaciones rígidas de: 


Una recta Un plano 


Traslación 


Reflexión 


Todas estas transformaciones pueden ser entendidas como simetrías 


Todo es simetría (o simetría rota) 


Toda transformación rígida de una forma puede entenderse como un tipo de simetría. 
De hecho los matemáticos lo consideran así (aunque en la expresión vulgar "simetría" 


suele referirse a una "reflexión"). 


En su libro ¿Es Dios un geómetra? lan Stewart y Martin Golubitsky sostienen que todas las 
formas del mundo se pueden entender como formas simétricas o formas donde se ha roto 
la simetría, esta ruptura de una simetría original explicaría las regularidades sorprenden- 


Una estrella de mar 


Lectura complementaria 


lan Stewart; Martin Golu- 
bitsky (1999). ¿Es Dios un geó- 
matra? Barcelona: Crítica - 
Grijalbo Mondadori ("Dra- 
kontos"). 











tes que a veces se encuentran. Por ejemplo, un huevo esférico de tortuga es simétrico en 
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todos sus ejes y un huevo de gallina ha roto en parte la simetría, conservando sólo una 
simetría bilateral. 





Huevo de tortuga y huevo de gallina 


Cualquier transformación que no podamos considerar "rígida" puede ser en- 


tendida como deformación. Son deformaciones habituales: 


e  —Distorsionar 


Para ver cómo las transforma- 


e Proyectar ciones geométricas se convier- 


e Metamorfosis que permiten los efectos especiales en los medios audiovi- orale 
jo en los programas de gráfi- 
suales cos, leer el subapartado "Pro- 


piedades de los objetos vecto- 
riales" perteneciente al apar- 


] tado "Gráficos vectoriales" del 
módulo "Gráficos digitales". 


Transformar 


fl 


Deformaciones habituales 
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2. Color y diseño gráfico 


2.1. Modelos de clasificación del color 


2.1.1. Luminosidad, saturación y matiz 


A través del tiempo y las culturas se han concebido teorías y explicaciones para 
la visión de los colores estrechamente vinculadas a las concepciones sobre la 
visión. A partir de las primeras aproximaciones científicas (Newton y Huygens, 
siglo XVII) las teorías se centran en la física y la Óptica y entre finales del siglo 
XIX e inicios del Xx se introduce el factor psicológico. 


Las actuales concepciones del color arrancan de 1931 y son el resultado de la 
confluencia de la fisiología, la física, la química y la psicología de la percep- 
ción. Los modelos que usamos actualmente se basan en tres parámetros fun- 
damentales: luminosidad, saturación y matiz. Veamos qué propiedad define 
cada uno de estos conceptos: 


e [a luminosidad, luminancia o brillo define las diferencias de cantidad de 


luz de un color. Un rojo oscuro tiene menos luminosidad que un rojo claro. 


e  Lasaturación define el nivel mínimo y máximo de pureza de un color. Los 
grises representan la ausencia total de saturación. Un rojo intenso puede 
tener el mismo nivel de luminosidad que un gris, pero tiene un nivel má- 


ximo de saturación. 


e F] matiz o tono define la diferencia entre un color y otro. Un verde pálido y 
un verde oscuro tienen el mismo matiz. Un verde y un azul tienen distinto 


matiz. 


2.1.2. Modelos tridimensionales del color 


La clasificación de los colores no encaja en un esquema bidimensional. Por ello 
los diferentes autores que han afrontado dicha tarea se han valido de modelos 
tridimensionales para representar los colores a modo de esquema y ofrecer 
modelos comprensibles de representación. A continuación se muestran los 


principales modelos: 


Más información sobre las con- 
cepciones sobre la visión en el 
módulo "Percepción visual". 
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Pirámide de Lambert (1772) 


Lambert situó en una pirámide de base triangular el blanco en el vértice superior y los 
colores primarios en los otros tres. El negro lo dispuso en el punto central de la base. 

Desde ésta hacia arriba los colores se aclaraban y desde las aristas de la base hacia 
el interior oscurecian. 

Los primeros modelos tridimensionales del color en la era moderna, como este, solían 
esconder los colores "feos" dentro del sólido y disponer el blanco en la parte superior. 





© de la representación tridimensional: Josep Giribet 
Creative Commons Reconocimiento Compartir Igual 3.0-es 


IIS A 


Clasificación del color 


2.2. Mezclas: aditiva, sustractiva, partitiva 


Diferenciamos tres tipos de mezcla de color en función de si es el resultado de 
la suma (o adición) de luces con distintas longitudes de onda (mezcla aditiva), 
si es la combinación de pigmentos que sustraen distintas longitudes de onda 
(mezcla sustractiva) o si es el resultado de disponer pequeñas áreas contiguas 
de distintos colores, de forma que el ojo perciba un color que no está en la 


imagen (mezcla partitiva). 


En la demostración siguiente puedes experimentar la diferencia de resultados 


en la combinación de colores por mezcla aditiva y mezcla sustractiva. 





Mezcla aditiva Mezcla sustractiva 0 


Mezcla aditiva: simulación de la superposición de diferentes focos de luz. Mezcla sustractiva: simulación de la mezcla de 
distintos pigmentos. 
Desplazad los cuadrados y superponedlos entre sí. 
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2.2.1. Mezcla aditiva 


Es la mezcla que se produce al combinar focos de luz (por ejemplo, en el teatro) 
y en la que se basa la generación del color en los monitores de televisión y 
de ordenador. 


En la mezcla aditiva la suma de colores aumenta la intensidad de luz y 


nos acerca al blanco. 


Como consecuencia de que nuestro aprendizaje en la mezcla de colores se 
produce habitualmente con el uso de pigmentos, la mezcla aditiva produce 
resultados que pueden parecer anti-intuitivos. No es así para algunos profesio- 
nales como los técnicos de iluminación que trabajan en las artes escénicas o 


los fotógrafos de estudio que han interiorizado este tipo de combinación. 


En el campo de la imagen sintética es importante controlar la mezcla aditiva 
cuando se trabaja en la construcción de entornos 3D que tienen que ilumi- 


narse. 


A continuación se muestra en un esquema el resultado de la combinación 
de focos con distintas longitudes de onda. Para simplificar utilizaremos los 
términos luz roja (para la onda larga), luz verde (para la onda media) y luz 
azul (para la onda corta). 


La luz roja y azul se 
mezclan y dan magenta 


Roja 


La luz verde, 
roja y azul se 
mezclan y 
dan blanco 





La luz verde y 
roja se mezclan 
y dan amarillo 


La luz verde y 
azul se mezclan y 
dan cian 


Verde 


Mezcla aditiva 
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2.2.2. Mezcla sustractiva 


Es la mezcla resultante de la combinación de pigmentos. Se produce en la 
mezcla de pinturas de todo tipo y también en la mezcla de tintas de imprenta y 
de tintes textiles. Los pigmentos tienen la capacidad de sustraer parte de la luz. 


Por lo tanto, en la mezcla sustractiva, la suma de pigmentos de color 


distinto da como resultado un color más oscuro. 


Si sumamos varios colores opuestos el color resultante será próximo a negro. 


Es el tipo de mezcla que resulta más intuitiva para la mayoría de personas. 


A continuación se muestra en un esquema el resultado de la combinación 
de pigmentos que sustraen distintas longitudes de onda. Concretamente se 


combinan tres pigmentos: el azul cian, el magenta (o fucsia) y el amarillo. 


La mezcla de pigmento 
magenta y cian da 
como resultado un 

pigmento azul. 


Magenta Cian 


La mezcla de los 
tres pigmentos 
(magenta, cian, amarillo) 
da como resultado un 
pigmento negro. 





La mezcla de 
pigmento cian y amarillo 
da como resultado 
un pigmento verde. 


La mezcla de 
pigmento amarillo 
y magenta da como 
resultado un 
pigmento rojo. 


Amarillo 


Mezcla sustractiva 


Encontraréis más información 
sobre cómo los pigmentos in- 
fluyen en la percepción del co- 
lor en el apartado que trata 

de estos, dentro de la sección 
"Percepción del color" en el 
módulo de "Percepción visual" 
de estos materiales. 
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2.2.3. Mezcla partitiva 





Mosaico romano. La combinación de teselas forma la ilusión de otros colores. 

Máscara teatral, Itálica (Sevilla) siglo 111 d. C. 

Foto en cuatricromía. La combinación de tramas de puntos de sólo 4 colores con inclinaciones distintas crea la ilusión de otros 
colores. 

Foto indexada. La trama estocástica de puntos de sólo 216 colores crea la ilusión de otros colores que no están en la imagen. 
O del mosaico: Grup Oliba (UOC). http://oliba.uoc.edu/mosaic/es/exp_13_tm.html. Creative Commons Reconocimiento 
Compartir-Igual 3.0-es 

O de las fotos: David Gómez Fontanills 2011. Creative Commons Reconocimiento Compartir-Igual 3.0-es 


La mezcla partitiva es el resultado de una combinación de estímulos simultá- 
neos. En esta mezcla podría decirse que no interviene la física: la mezcla que 


da lugar al color no se produce ni en la fuente luminosa ni en los pigmentos 


que cubren el objeto percibido; la mezcla se produce en nuestro cerebro. 


Hablamos de mezcla partitiva cuando estamos percibiendo un color 
donde hay pequeñas áreas de otros colores. Se produce porque nuestro 
cerebro actúa de forma contextual y modifica los colores de un objeto 


en función de los colores contiguos. 


En este caso tenemos pequeños puntos de varios colores y el resultado es la 
percepción de un nuevo color que no está ahí. Este fenómeno es muy útil por- 


que permite representar una gran variedad de colores a partir de unos pocos. 


Esto viene haciéndose desde antiguo, el mejor ejemplo de ello son los mosai- 
cos romanos. Pero sobre todo tiene gran importancia en la representación 
de los colores por cuatricromía en las artes gráficas. Las imágenes se separan 
en los tres colores básicos —cian, magenta, amarillo- más el negro que junto 
al blanco del papel actúa sobre el nivel de luminosidad percibida. Luego se 
traman de forma que al imprimirlos los puntos de un color no pisen los de 
otro. Para que esto no pase los puntos de cada color se disponen en un ángulo 
de inclinación distinto. Al imprimirlos todos conforman la llamada roseta. 
En función de la cantidad de cada color (tamaño del punto) percibiremos un 


color u otro. 


CC-BY-SA e PID_00191347 25 


Conceptos básicos de diseño gráfico 





Mezcla partitiva 








Reduce la imagen clicando el botón con el signo negativo, amplíala clicando el signo positivo. 
O de la foto: David Gómez Fontanills 2002 — Creative Commons Reconocimiento Compartir Igual 
3.0 - es. 


La mezcla partitiva o mixta se basa en los cambios en la percepción de colores contiguos. 
En la secuencia anterior se puede observar una imagen ampliada de una cuatricomía de 
imprenta; se distinguen puntos de cuatro colores: cian, magenta, amarillo y negro. 


Además de la impresión en cuatricomía la mezcla partitiva es usada para obtener matices 
de luminosidad en impresión a una sola tinta y ha sido usada desde tiempos inmemo- 
riales para la confección de mosaicos y alfombras. 


La mezcla partitiva se basa en la sustracción que producen los puntos de color y en la 
gran diversidad de pequeños estímulos que llegan al ojo de una pequeña área del espa- 
cio. Robert Silvers del Media-Lab del MIT, usa este efecto creando imágenes que están 
compuestas por miles de otras imágenes. Como ejemplo consulta en Internet la cara de 
Lady Di creada a partir de fotos de flores para la revista Newsweek. 


Conforme los puntos se van haciendo pequeños sus colores originales se pierden y se 
mezclan con los contiguos. Si entornas los ojos ya puedes ver nuevos colores. Los pin- 
tores puntillistas, como Seurat, usaban este efecto, usando pinceladas de colores puros 
(distinguibles en una observación cerca de la tela) conseguían una gran variedad de ma- 
tices conforme el observador se alejaba del cuadro. 


En la última imagen de la secuencia ya casi no se distinguen los puntos, sigue habien- 
do sólo cian, magenta, amarillo y negro pero percibimos una gran variedad de matices 
aunque no estén ahí. 


Comprueba el uso de esta técnica en una revista en color usando una lupa para distin- 
guir los puntos (que pueden llegar a ser muy pequeños, dependiendo de la calidad de 
impresión). 
Un sistema similar, pero no exactamente igual, a la cuatricromía de las artes 
gráficas se utiliza en las tramas aleatorias que se generan cuando se pasa una 
imagen a modo indexado usando el parámetro de trama de difusión en un 
programa de tratamiento de gráficos. También en las tramas aleatorias (o es- 


tocásticas) que generan las impresoras a color. 


Trama estocástica 


El término estocástico se refiere a un fenómeno determinado por el azar. Los algoritmos 
informáticos que buscan aproximarse a resultados determinados por el azar se llaman 
estocásticos y basan sus resultados en probabilidades cambiantes. La distribución esto- 
cástica de puntos se usa en algunos sistemas de representación por mezcla partitiva de 
4 tintas más el blanco del papel como alternativa a la disposición por puntos con tra- 
mas regulares de la cuatricromía convencional. A diferencia de aquella, las cuatricromías 
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estocásticas no producen el efecto moiré que a veces aparece usando tramas regulares 
cuando hay pequeños desplazamientos entre colores en la imprenta. 


En los dos casos se está usando también la mezcla partitiva pero la disposición 
de los puntos no se hace sobre la base de ángulos de inclinación sino que se 


basan en algoritmos estocásticos que los distribuyen aleatoriamente. 


No obstante, a diferencia de la mezcla sustractiva y especialmente de la 
mezcla aditiva, con la mezcla partitiva no se pueden representar todos 


los colores. 


Dada su naturaleza que parte de la interacción entre colores, es imposible re- 
presentar colores muy luminosos y brillantes. Recordemos que la mezcla par- 
titiva se produce en el cerebro como resultado del estímulo con distintas lon- 
gitudes de onda de áreas muy pequeñas de la retina. Hay colores que pueden 
obtenerse modulando la longitud de onda de una fuente luminosa o mezclan- 
do pigmentos que mediante la disposición de pequeños puntos de color uno 


junto a otro no podemos obtener. 


Codificación CMYK 
Los programas de tratamiento de gráficos que trabajan con la codificación CMYK suelen 


advertir cuándo un tono elegido en su selector de color no es reproducible en cuatricro- 
mía y nos ofrecen la alternativa más próxima. 


Selector de color (color frontal) 


(Añadir a muestras _) 
A > mi Bibliotecas de colores 
«1226 |° ' 158 
. 150 1% ' IB 
. 187 |% ' |- 
: | PRRI - 


Osólo colores Web 





El selector de color de Adobe Photoshop CS3 muestra una advertencia cuando el usuario elige un color que no tiene 
correspondencia en cuatricromía. También ofrece un color alternativo que sí pueda reproducirse. 


En el ejemplo siguiente podemos ver, a la izquierda, una imagen fotográfica con codifica- 
ción RGB. A la derecha se muestra la misma imagen tal como se ve codificada en CMYK, 
preparada para ser impresa. La cuatricromía no permite reproducir algunos de los colores 
que muestra la imagen original. 
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A i 
© Dungodung, DarkEvi 2006 — Imagen en el Dominio Público. Publicada originariamente en Wikimedia Commons. 


2.3. Colores primarios, secundarios y complementarios 


El estímulo de las células de la retina por 3 longitudes de onda distintas que 
lleva a la percepción de los colores nos permite hablar de 3 colores primarios 
(rojo, verde y azul). A partir de la combinación de dos de ellos obtendríamos 
los colores secundarios y de la combinación en distintas intensidades de los 


tres los colores terciarios. 
Colores primarios, secundarios y terciarios 


Colores 








Primarios: rojo, verde y azul 





Secundarios (combinación 
de dos primarios): cian, 
magenta y amarillo 





Terciarios: resultado de la 
combinación de diferentes 
cantidades de los tres 
primarios 
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Pero la combinación de pigmentos nos permite hablar de otros primarios: 
aquellos pigmentos (cian, magenta y amarillo) de cuya combinación podemos 
obtener el resto de colores. Algunos autores prefieren llamar a estos colores 


básicos en vez de primarios que se reserva para la luz. 


No es por casualidad que los colores básicos de pigmento sean los secundarios 
de luz ni que los primarios de luz sean los secundarios en la mezcla de pig- 
mentos básicos. A los colores que no comparten componentes, como el verde 
(primario) y el magenta (formado por los primarios rojo y azul), se les llama 
complementarios. La combinación de colores complementarios crea un con- 


traste fuerte. 


Rueda de color 


Mostrar tabla completa Solo primarios A | Complementarios 





2.4. Codificación digital del color 


La tecnología digital de tratamiento y edición de gráficos, como en su mo- 
mento la industria textil, las artes gráficas, la industria cervecera y tantos otros 
sectores productivos, ha necesitado de modelos numéricos de color. Ya se ha 
visto cómo estos modelos tienen una representación gráfica (a menudo tridi- 
mensional) que nos ayuda a comprenderlos. Pero sobre todo nos dan unos 


parámetros numéricos que nos permiten trabajar con ellos. 





Contenido 


complementario 





La idea de que existen unos 
colores "complementarios" de 
otros no deja de ser una con- 
vención que se ha ido cons- 
truyendo culturalmente. So- 
bre la base de que un color es 
complementario de otro cuan- 
do no comparten componen- 
tes, actualmente consideramos 
complementarios los colores 
en función de los tres colores 
primarios y basándonos en tres 
longitudes de ondas electro- 
magnéticas. 


Pero las diversas teorías del co- 
lor han manejado, sobre todo 
en los dos últimos siglos, di- 
versas formas de clasificación 
del color. Así es que tanto en 
la práctica artística como en el 
diseño o las industrias relacio- 
nadas no siempre los colores 
considerados complementarios 
han sido los mismos. No es ex- 
traño encontrar otras polarida- 
des en diversos autores o en 
los escritos de artistas y diseña- 
dores. Quizás la más habitual 
sea la de considerar el verde 
(en vez del cian) como com- 
plementario del rojo. 
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R:255 G:0 B:0 
C:0% M:87% Y99% K: 0% 
H:0 S: 100% B: 100% 
L:54 a:81 b:70 


Para definir un color se pueden utilizar diferentes 
sistemas. 


El más común es el RGB en el que se basa el sistema de color de los ordena- 
dores y televisores. El CMYK se usa para impresión en cuatricromía y el HLS 
nos permite controlar por separado tono, luminosidad y saturación. Abrien- 
do el selector de color de un programa de gráficos puede observarse que por 
lo menos están disponibles estos tres sistemas de selección. Además podemos 
encontrar el sistema Lab de la CIE y sistemas de color estándar o normativi- 
zados usados en otras industrias como PANTONE, ANPA, DIC, TOYO, etc. 





Selector de color (color frontal) 


O [Añadir a muestras 


Bibliotecas de colores 








actual 


(DH: 196 ° OL: 80 
Os: 39 % Oa: | -18 
OB: 91 % Ob: |-19 





OR: 141 C: 148 % 
OG: | 208 M: 1 % 
OB: |232 Y:|5 |% 
O sólo colores Web pre o 














Selector de color de Adobe Photoshop CS3 


Encontraremos también la posibilidad de escoger el color RGB por codificación 
hexadecimal. Esto es muy útil, pues el lenguaje HTML usa esta codificación y 
nos servirá para sincronizar los colores de los gráficos con las tablas y fondos 
de la página web. El código hexadecimal en el software de gráficos suele estar 


en un campo de texto que nos permite seleccionarlo y copiarlo. 
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2.4.1. Modos de color 


Los programas de gráficos que trabajan en mapa de bits (como GIMP o Pho- 
toshop) usan canales de 8 bits, que permiten representar hasta 256 valores, 
para codificar el color. En función del tipo de codificación serán necesarios 


más o menos canales. 


Los diferentes sistemas de codificación del color que pueden aplicarse al do- 
cumento en el que estamos trabajando son conocidos como modos de color. 
Los modos de color son independientes del sistema de codificación elegido en 
el "Selector de color" para buscar un tono concreto; después este color quedará 
representado por la codificación correspondiente al modo elegido. 


La elección de un modo de color u otro depende de la finalidad del gráfico. 
Hay modos adecuados para trabajar con un gráfico que deberá acabar impreso 
y otros adecuados para gráficos que deberán visualizarse en pantalla. También 
la cantidad de memoria que ocupará finalmente el gráfico depende en parte 


del tipo de codificación de cada modo. 





a) Indexado. 8bits. 14Kb. b) Escala de grises. 8bits. 23Kb. c) RGB. 24bits. 45Kb. d) B/N. 1bit. 12Kb. e) CMYK. 32bits. 63Kb 


2.4.2. Modo pluma 


Corresponde a las imágenes de 1 bit. Son imágenes de sólo dos tonos 


(por ejemplo, blanco y negro). 


Dependiendo de la densidad de trama podemos conseguir efectos de zonas 
sombreadas o iluminadas. Los programas suelen disponer de varios algoritmos 


opcionales y parametrizables con los que se obtienen distintos tramados. 


Ocupan poco espacio de memoria pero no se pueden utilizar medios tonos. 
Se usan tanto para gráficos para la web (que sean muy simples) como para 
impresión. De hecho el término pluma es el que se emplea en las artes gráficas 


para referirse a este tipo de imágenes. 


En el programa Photoshop se conoce con el nombre modo mapa de bits que 
puede resultar un poco equívoco. En otros programas (como Gimp) se consi- 
gue definiendo una profundidad de un sólo bit al pasar a modo indexado. 


Si nos resulta más cómodo ele- 
gir el color usando el sistema 
HLS y el selector del programa 
lo permite, podemos elegir un 
color con ese sistema; pero si 
el modo de color para el do- 
cumento es RGB, el programa 
codificará y guardará la infor- 
mación del color en RGB. 
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a) La imagen original en modo RGB de este ejemplo se ha pasado a modo pluma (codificada con un solo bit) eligiendo la 
opción sin tramado. b) La imagen original en modo RGB en este otro caso se ha pasado a modo pluma aplicando un tramado. 
Concretamente se ha aplicado una trama Floyd-Steinberg desde Gimp. 


2.4.3. Modo de color indexado 


Es un modo de color que trabaja con un solo canal de 8 bits. Por lo 
tanto, puede representar un máximo de 256 valores que corresponde a 
una paleta de otros tantos colores. 


Se usa para gráficos destinados a la web o a producciones multimedia que 
deberán ser vistas en pantalla. El hecho de reducir el número de bits en la 
codificación de la imagen reduce su peso (memoria que ocupará el archivo). 
Pueden usarse paletas menores de 256 colores de manera que aún pese menos. 
Una paleta de dos colores necesitará sólo 1 bit para guardar la información de 


color y ocupará poca memoria. 


La mayoría de programas de gráficos permiten escoger el número de colores de 
la paleta (o el número de bits para codificarlo). Esto puede hacerse al escoger 
el modo de color en el que se trabajará o bien al final, para generar el gráfico 
que deberá ir a la web (es el caso de Fireworks o del módulo "Image Ready" 
para Photoshop). También permiten escoger tipos de tramados que ayudan a 


obtener colores que no están en el gráfico a través de la mezcla partitiva. 


a) b) 





a) Imagen indexada con paleta Web216 sin tramado. Los colores originales han sido sustituidos por los colores más próximos 
que estuvieran en la paleta. b) Imagen indexada con paleta Web216 desde Gimp usando un tramado Floyd Steinberg. Los 
colores originales se simulan por mezcla partitiva usando una trama de puntos de distribuidos de forma estocástica. 
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Paleta 256 colores Paleta 128 colores Paleta 64 colores 





Paleta 32 colores Paleta 8 colores Paleta 4 colores 


En este ejemplo vemos cómo puede cambiar una imagen tramada en función del número de colores que 
tenga la paleta a la que se indexa. 
O Alba Ferrer 2009 - Creative Commons Reconocimiento Compartir-Igual 3.0 


2.4.4. Modo de color escala de grises 


Una variante del modo de color indexado sería el modo de escala de 
grises o medios tonos. Usa también un canal de 8 bits que da 256 va- 


lores de gris. 


Es el adecuado para fotografías en "blanco y negro" e imágenes similares. Es un 
modo válido tanto para impresión como para pantalla. En comparación con 
la imagen en color indexada, la calidad de una imagen en escala de grises es 
alta pues con 256 grises se tiene un buen escalado de valores de luminosidad. 
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MOD 
y NADIA 


MUDA 
NUIT 


+ > - 


j s r A 


Imagen en escada de grises 


2.4.5. Catálogos de color 


Existen diferentes catálogos de tintas de impresión que son muy útiles para 
elegir un color determinado. Por una incorrecta traducción literal del inglés 
colour libraries se los suele llamar librerías de color. Son varios los fabricantes 
que los realizan. Cada industria (artes gráficas, textil, automovilística, etc.) 


tiene sus estándares. 


El catálogo más conocido para las artes gráficas es Pantone, pero también 
existen otros como Trumatch, Foltone, Toyo o Anpa-Color. 


Cuando nos referimos al uso de catálogos de color para gráficos digitales signi- 
fica que estos gráficos deberán imprimirse o estamparse usando tintas. Como 
las tintas están codificadas usaremos la misma codificación en el ordenador. Si 
el destino final es, por ejemplo, una impresión en offset o serigrafía cada tinta 
elegida corresponderá a un fotolito y a una plancha o pantalla. Por eso es nece- 
sario valorar si vamos a usar tintas específicas escogidas de un catálogo, como 


Pantone, o bien usaremos cuatricromía, codificación CMYK, para imprimir. 


Es recomendable escoger tintas de catálogo cuando queramos imprimir me- 
nos de 4 colores o cuando queremos añadir un color muy específico difícil de 


representar por cuatricromía. 


Los programas de dibujo vectorial reconocen cada uno de los colores elegidos 
y generan un fotolito para cada uno de ellos. Algunos programas de mapa de 
bits tienen modos monotono, duotono, tritono o cuadritono para trabajar 


sólo con una tinta o con una combinación de ellas. 
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Algo que puede confundirnos es que el selector de color de los programas de 
gráficos permita elegir colores de determinados catálogos aunque trabajemos 
en modo RGB o CMYK. Permiten hacerlo porque algunos diseñadores están 
muy familiarizados con ellos y están acostumbrados a elegir el color en base 
a sus catálogos. Pero no nos engañemos, el color elegido se codifica según el 
modo de color que tengamos elegido, independientemente de cómo se obten- 
ga en el selector de color. 


Algunos de estos programas (como Photoshop) advierten cuando se trabaja 
en modo CMYK y se elige un color que no podrá ser representado por cuatri- 


cromía. 





Colores personalizados X| 
Catálogo: | PANTONE Coated =] 
] ; i = Cancelar 








= = =— PA 
f =- A MA s pni A i 
m E N p APR 


Selector | 





N* de color: 174 


Ox C 
69% M 
100% Y 
399% K 


Teclee un número para seleccionario 
en la lista de colores 


Eligiendo un color de la librería PANTONE en el selector de color de Adobe Photoshop 


2.4.6. Codificación RGB 


La codificación RGB (red, green, blue) o RVA (rojo, verde, azul) parte 
de los 3 colores primarios de luz y les da a cada uno de ellos un valor 
entre 0 y 255. Combinando estos colores consigue una amplia gama de 


tonos. 


En los sistemas digitales son necesarios 24 bits para almacenar un gráfico en 
RGB. En los programas de dibujo de mapa de bits el modo RGB usa tres canales 
de 8 bits cada uno. 
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SJ Cambiar el color de frente 


A, 
Y 
A 
Y 
A 
Y 
A 
Y 
a 
vY 
A 
vY 


Notación HTML: cc805a 


M PA O r r r 
E E | O 


Usando la codificación RGB en el selector de color de GIMP 





Los monitores de televisión y de ordenador usan RGB para representar el color, 
por lo que trabajar en modo RGB es la opción más adecuada para conseguir 
color de calidad en gráficos que deben ser vistos en pantalla (como los de una 
web). Los estándares de color en las páginas web usan también la codificación 
RGB para definir el color del texto, líneas o fondos. 


Para una imagen destinada a imprimirse en una impresora de sobremesa puede 
usarse RGB porque la mayoría de ellas hace automáticamente la conversión. 
De todas formas hay que tener en cuenta que estas impresoras tienen cuatro 
tintas (cian, magenta, amarillo y negro) que no corresponden con los colores 
rojo, verde y azul. 


Para una imagen destinada a imprimirse en offset el modo RGB es totalmente 


inadecuado pues saldrían 3 fotolitos (uno por canal) que no corresponderían 
Para ampliar información sobre 
las diferencias y equivalencias 
de colores que pueden ser re- 
presentados con distintos siste- 
2.4.7. RGB en decimal y hexadecimal mas de codificación del color 
y cómo afecta esto a la repro- 
ducción del color en diferen- 
tes dispositivos ver el subapar- 
tado "Codificación CIE L*a*b" 
y específicamente el contenido 
complementario que lleva por 
Una forma habitual en los programas de diseño es dar los valores de cada uno título "Colores visibles según 
dispositivo". 


con los colores usados en la imprenta. 


¿De qué forma se escriben los valores RGB en los sistemas informáticos? 








de los componentes del RGB usando la numeración decimal entre O y 255. 





Cada componente tiene su valor numérico, en un rango de entre O (mínimo) 
a 255 (máximo). Un blanco total tendría el valor RGB de (255, 255, 255), un 
negro sería (0, O, 0), un rojo de máxima saturación (255, O, 0), y así todas las 


demás combinaciones. 


Pero en algunos casos también es habitual escribirlo usando la numeración 
hexadecimal, fue el caso del HTML en la web hasta que llegaron las hojas de 
estilo. Y aún se sigue usando porque es una forma compacta de dar un valor 
de color con sólo 6 dígitos. Es por eso por lo que muchos selectores de color 
de programas de gráficos nos ofrecen también los valores RGB de un color en 
ese formato. 
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La escritura hexadecimal usa 16 dígitos ya que a los diez números convencio- 


nales (del O al 9) se le suman 6 letras del alfabeto latino (de la A a la E). 


Tabla de equivalencias decimal/hexadecimal entre cero y veinte 


Decimal Hexadecimal 
0 0 
1 1 
2 2 
3 3 
4 4 
5 5 
6 6 
7 7 
8 8 
9 9 
10 A 
11 B 
12 C 
13 D 
14 E 
15 F 
16 10 
17 11 
18 12 
19 13 
20 14 


Si para representar el valor de un componente RGB con el sistema decimal 
usamos un rango entre 0 y 255, con el sistema hexadecimal usaremos un rango 
entre 00 y FF, siendo el 00 el valor mínimo y FF el máximo posible para cada 


color primario. 
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Para representar cualquier color usaremos 3 pares de dígitos, donde cada par 
determina el valor de una de las tres componentes. Así, para representar el ne- 
gro, que es ausencia total de luz, de forma hexadecimal escribiríamos: 000000. 
Por el contrario el blanco sería codificado como FFFFFF. Un rojo saturado sería 
FF0000, un verde saturado OOFFOO y un azul saturado OOO00FE. 


Los otros colores se representan mediante combinaciones de valores en cada 


componente. 


2.4.8. Color en la web, RGB en hojas de estilo 


Las páginas web se definen técnicamente a través del lenguaje de marcado 
HTML, que define su estructura, y de las hojas de estilo CSS, que definen su 
apariencia. La evolución de estos estándares se lleva a cabo a través de las es- 
pecificaciones y recomendaciones del W3Consortium, un consorcio formado 
por organizaciones, empresas e instituciones públicas y privadas comprome- 
tidas con el desarrollo de la web. En diciembre de 1996 el W3Consortium, 
conocido también como W3C, hizo la primera recomendación del estándar 
CSS-1 y en 1998 lo hizo para CSS-2. Progresivamente los principales navega- 


dores implementaron la interpretación de estos estándares. 


En los parámetros de CSS el color se define por RGB. Esto puede hacerse con 
dígitos hexadecimales o decimales. En el apartado "RGB en hexadecimal" se 
ha explicado que para establecer un color de forma hexadecimal se hace con 
3 números formados por dobles dígitos, en HTML y en las hojas de estilo estos 
6 números van siempre precedidos del signo "++". Para establecerlo con valores 
decimales se escribe "rgb" seguido de 3 valores decimales entre O y 255 con- 
tenidos entre paréntesis y separados por comas. A continuación se muestran 


algunos ejemplos. 


Componente rojo 
Componente verde 


Componente azul 





Colores RGB y notación hexadecimal 


Variando los valores en cada componente del RGB podemos representar numéricamente 
miles de colores. Usando el sistema hexadecimal cuanto más bajo es un valor (más pró- 
ximo a 00) menos luz tenemos de una componente y cuanto más alto (más próximo a 
FF) tenemos más. 


En diseño web los colores considerados safe, que se pueden reproducir fielmente sin 
cambios en distintos navegadores y sistemas operativos, son los que contienen los niveles 
de 00, 33, 66, 99, CC o FF, para cada color primario. 
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Un rojo oscuro puede ser representado como un #330000. Este rojo sería menos brillan- 
te que el rojo total (#FF0000). Un rojo con más brillo podría ser #660000. Igualmente 
haríamos con los otros componentes. Por ejemplo, un verde total, F+00FFOO, o un verde 
oscuro #003300. Un azul medio #000099 o un azul oscuro #000033. 


FF FF FF FF FF FF FF FF FF 
66 CÊ CC 
99 99 99 
66 66 66 
33 33 33 
00 00 00 00 00 00 00 00 00 


#660000 #009900 #0000CC 


CC-BY-SA e PID_00191347 39 


Conceptos básicos de diseño gráfico 





Aplicación en una página web 


Si, por ejemplo, queremos que el color de los textos de párrafo en una página web sea 
rojo escribiremos, codificado en hexadecimal, en la hoja de estilo: 


D { 
colors OOOO 


) 


O bien con valores decimales: 


p { 
Color: rgo(255, 0,0) z 


} 


Si además queremos un color de fondo amarillo escribiremos en hexadecimal: 


Pa 
colors FEF O000 
backgrounc=color; pEFErrO; 


) 


O bien con valores decimales: 


pd 

cor AO ISLAS AO E 
backgrouncecolors OZ Oe 
) 


El W3C ha establecido además dieciséis nombres de color que pueden usarse directamen- 
te por escrito: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, pur- 
ple, red, silver, teal, white y yellow. Así para nuestro texto rojo podríamos haber escrito 
también: 


pá 
colors med 


Existen además unos ciento cincuenta nombres que son reconocidos por los principales 
navegadores, aunque no forman parte del estándar. 


2.4.9. Codificación HSB 


La codificación HSB (Hue, Saturation, Brigthness)' usa los tres pará- 
metros básicos del color. Es por ello -y porque se suele representar me- 
diante un cuerpo geométrico regular (un cono o un cilindro)- por lo que 


es uno de los sistemas más intuitivos para manejar la selección del color. 


El parámetro tono o matiz* tiene los valores en grados, correspondientes a su 


posición en la base o en la periferia del cono. Va de 0° a 360°. El parámetro 


saturación” se mide en porcentaje, desde un 0% no-saturado (blanco, gris o 


negro) en el eje central del cono hasta un 100% de color puro en la periferia. 


El brillo” determina la luminosidad del color y también se mide en porcentaje 








STono, saturación, brillo 











® Hue en inglés. 








O Saturation en inglés. 











OBrigthness en inglés. 
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desde el 0% (negro) en el vértice del cono hasta el 100% en su base, que co- 
rresponde a la máxima luminosidad de los colores puros y sus combinaciones, 


incluido el blanco en el centro donde se suman todas las componentes. 


Selector de color (color frontal) 


ai Bibliotecas de colores 
OH: /0 ' |32 
OS: | 100 |% : 
OB: (60 |% : 
OR: 
OG: | : 
j JOB: : 


Cl Sólo colores Web 


# | 990100 





Usando la codificación HSB en el selector de color de Adobe Photoshop 


Cuando se tienen que crear gamas de color armónicas o determinados tipos 
de contrastes resulta útil usar el sistema HSB para seleccionar el color pues 
nos permite mantener un parámetro estable, por ejemplo, el tono, y variar los 


otros, luminosidad o saturación. 
Existen otros modelos que usan parámetros muy similares al HSB aunque en 


distinto orden, a veces con distintos valores y representados tridimensional- 


mente de otra forma. Algunos de ellos son: 
* HLS (Hue, Lightness, Saturation?), 
° HSV (Hue, Saturation, Value”) o 


° HVC (Hue, Value, Croma’). 


2.4.10. Codificación CIE L*a*b 


En 1931 la CIE (Comission Internationale de l'Eclariage) creó el sistema de 
codificación del color CIE xyz basado en el cambio de paradigma que clasifica 
el color en función de la percepción subjetiva del espectador y no intenta en- 
contrar un modelo bonito, geométricamente regular. En 1976 se perfeccionó 


el sistema bajo el nombre de CIE L*a*b. (coordenadas de luminosidad a y b). 


El sistema está diseñado para garantizar la coherencia del color con indepen- 


dencia del dispositivo (escáner, monitor, impresora,...). 








7 ; : T 
( Tono, luminancia, saturación 














8 E 
( Tono, saturación, valor 














Tono, valor, croma 
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+L* Blanco 





l -b Azul 
-a Verde 


Negro (L = 0) 


O Josep Giribet. Creative Commons Reconocimiento Compartir-Igual 3.0-es 


Los tres parámetros que lo determinan son: 


e Grado de luminosidad: un eje del negro (valor 0) al blanco (valor 100) 


e Componente cromático a: un eje que va del verde (valor mínimo -128) 


al rojo (valor máximo 127) 


e Componente cromático b: un eje que va del azul (valor mínimo -128) al 


amarillo (valor máximo 127) 


El uso de CIE L*a*b como sistema de selección de color parece, en principio, 
menos intuitivo que, por ejemplo, el sistema HLS. Pero si se entiende a que 


responden sus parámetros será mucho más fácil de usar. 


Como modo de color, CIE L*a*b utiliza 3 canales en los programas de mapa 
de bits, uno para cada parámetro. Requiere por lo tanto de 24 bits. 


Algunos programas, como Photoshop, usan la codificación L*a*b como modo 
intermedio en la conversión de un modo a otro. Por lo tanto, puede ser una 
buena opción trabajar en modo L*a*b para crear gráficos que luego tendrán 
que tener una versión para pantalla en RGB y una versión impresa en CMYK, 
independientemente del sistema que se use para selección del color. 


Faleria de cales [colar frankai] E 





nao calor Pres 


Usando la codificación CIE L*a*b en el selector 
de color de Photoshop 
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2.4.11. Espacios de color según dispositivo en CIE Yxy 








II II — 
Pantone Monitor CMYK 


Modelo CIE Yxy en el cual se pueden observar los espacios en función de si es para 
monitor, Pantone o CMYK. 


En el esquema superior puede verse una representación bidimensional del mo- 
delo CIE Yxy (una evolución del inicial CIE zxy) en el que se muestran los 
colores que se pueden conseguir en función del dispositivo y/o del sistema de 


reproducción. 


Obsérvese el desencaje entre lo que puede representarse en un monitor, que 
usa RGB para generar una mezcla aditiva, y una impresión en papel. Obsér- 
vese también la diferencia entre la reproducción impresa en cuatricromía, co- 
lores percibidos gracias a una mezcla partitiva, y una reproducción impresa 
con tintas PANTONE, los colores son resultado de una mezcla sustractiva de 
pigmentos. Hay colores imposibles de conseguir con cuatricromía que se ob- 


tienen con una mezcla de pigmentos. 


También conviene remarcar que ninguno de los sistemas de reproducción del 
color consigue generar toda la gama de colores que puede percibir el ojo hu- 
mano. Hay una parte significativa de los colores que podemos percibir que 
quedan fuera del área de los colores que estos sistemas pueden generar. 


2.4.12. Codificación CMYK 
La codificación CMYK (cyan, magenta, yellow, black) o CMAN (cian, ma- 


genta, amarillo, negro) codifica el color usando como componentes los 3 co- 


lores básicos de pigmento y sumándoles el negro para obtener variaciones de 
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luminosidad combinado con el blanco del papel. El color se define según la 
proporción de cian, magenta, amarillo o negro, que se le aplique. Como modo 


de color, CMYK usa 4 canales de 8 bits, requiere por lo tanto 32 bits. 





Se trata de un sistema creado para la reproducción del color en sistemas de 
impresión y estampación. La aplicación tradicional y más conocida es la lla- 
mada cuatricromía que usa una trama regular de puntos con un determina- 
do ángulo de inclinación distinto para cada uno de los cuatro colores. El re- 
sultado es que los puntos no se superponen, a no ser que se aplique el 100% 
de cada color, formando una "roseta". La impresión por cuatricromía permite 
pues imprimir imágenes a color usando sólo 4 tintas y obteniendo una amplia 
gama de tonos. La cuatricromía se usa principalmente en la impresión offset 


y, en determinados casos, en serigrafía. 


La percepción de estos colores se produce gracias a una mezcla partitiva. Por 
lo tanto, hay determinados colores (especialmente luminosos o muy puros) 
que no es posible obtener por cuatricromía. Algunos programas de gráficos nos 
avisan cuando, usando el modo CMYK, elegimos un color que no es posible 
reproducir por cuatricromía. Además de la advertencia nos señalan el color 


más próximo que es posible imprimir. 
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Selector de color (color frontal) 


Añadir a muestras 
r ; Bibliotecas de colores 


C] sólo colores Web 





cualicromia. E colorjunto alicono del cubo es el color más Lróximo reproduelble y el cando ervél arab ls unoeór 
Cuando se está creando un gráfico con la finalidad de imprimirlo es mejor 
trabajar en modo CMYK ya que lo que vemos en pantalla se aproximará más 
al resultado final que si trabajamos en modo RGB. De todas formas es impor- 
tante tener en cuenta que, aun trabajando en modo CMYK, lo que vemos en 
pantalla es una simulación en RGB que el programa genera intentando apro- 
ximarse a lo que será el resultado en CMYK. Un catálogo impreso de colores 
en cuatricromía puede ser muy útil para tomar decisiones de color sin tener 


que basarnos sólo en la visualización en pantalla. 


La densidad de trama, cantidad de puntos en una determinada área, es la que 
determina la calidad de la imagen sobre el papel. Si la trama es muy fina los 


puntos pueden no ser percibidos por el espectador. 


Las impresoras de chorro de tinta (de sobremesa o de gran formato) utilizan 
también el sistema CMYK aunque el sistema de tramado es distinto. En vez de 
la cuatricromía tradicional usan un sistema que distribuye de forma aleatoria 


los puntos creando una trama estocástica. 


Para ampliar información so- 
bre la mezcla partitiva y los sis- 
temas de impresión por cuatri- 
cromía repasar el subapartado 
"Mezclas: aditiva, sustractiva y 
partitiva" del apartado "Color y 
diseño gráfico". 
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2.5. Interacción del color 











O 


El cuadrado menor parece cambiar de color en función del 
color de fondo. 


El sistema perceptivo humano no está basado en sensores inflexibles que mi- 
den con exactitud la longitud de onda que refleja cada objeto, al contrario, la 
percepción de los colores depende del contexto. 


Por un lado, el color de un objeto puede percibirse distinto en función del 
color de fondo que tenga. Por otro lado, el color de un objeto se mantiene 
perceptivamente estable cambiando la iluminación si mantiene la misma re- 
lación con su contexto. Por ello es posible considerar que el rojo de una lata 
de Coca-cola sobre una mesa es el mismo a la luz exterior del mediodía que la 


misma lata iluminada por una bombilla de 25 W sobre la misma mesa. 


Este efecto es importante para el creador gráfico porque un mismo elemento 
gráfico sobre distintos fondos puede cambiar de color. Para estos contextos es 


importante tener en cuenta una ley que se deduce de la experimentación: 


El fondo sustrae a la muestra (la figura) aquello que comparten. 


En nuestra composición de ejemplo el fondo violeta saca, a nivel perceptivo, 
azul y algo de rojo al cuadrado magenta dejándolo apagado. El negro sólo le 
saca oscuridad haciéndolo luminoso. El verde claro le saca amarillo y lumino- 


sidad oscureciéndolo y empujándolo hacia el rojo. 


Josef Albers (1888-1976) es quien más hizo para llamar la atención sobre estos 
fenómenos a través de la docencia en la Bauhaus y en Black Mountain Collage, 
en su creación pictórica y en su libro La interacción del color (Albers, 1996). 


Sus concepciones tuvieron gran influencia en los artistas de la corriente colour 


field dentro de los expresionistas abstractos. 
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En los ejemplos adjuntos, basados en las propuestas de Josef Albers, distintos 
colores de fondo interactúan con el color de los elementos gráficos que se 
han dispuesto sobre ellos. Lo que ocurre es que nuestro cerebro modifica el 


color en función de su contraste con el fondo. 








O 


¿Cuántos colores hay en la imagen? Un color parece dos o hace las veces de los fondos invertidos. Las aspas 
que parecen ser una de cada color (del color del fondo de la otra mitad) en realidad son del mismo color: un 
color intermedio muy inestable a la percepción. 








Q 


¿Cuántos colores hay en la imagen? Dos colores parecen iguales. El marrón de los cuadrados no era el 
mismo, pero los colores del fondo los empujaban a parecerse. El azul oscuro quitaba oscuridad a su muestra; el 
azul claro quitaba luminosidad a la suya. 


Este tipo de efectos funciona especialmente bien con colores terciarios, de por 
sí ya indefinidos, sobre los cuales pueden actuar distintos colores. 


Ejemplo aplicado: el logotipo de color inestable 


A continuación se muestra un símbolo, que podría ser el logotipo de alguna organización, 
con un color débil al que le cambiamos el color de fondo. Aunque no se ha cambiado el 
color del logotipo este se percibe distinto. Más claro o más oscuro, más anaranjado, más 
verdoso. Si queremos que el color se mantenga estable, paradójicamente, tendremos que 
cambiarlo en función del fondo, corrigiendo el componente que éste le sustrae. 
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2.6. Contrastes de color 


2.6.1. La clasificación de Itten 


Johannes Itten (1888-1967), profesor de los cursos preparatorios de la 
Bauhaus, definió 7 tipos de contraste entre colores. Se habla de contraste cuan- 
do hay intervalos sensibles entre dos áreas de color. Nuestra percepción del 


color es estimulada por el contraste que agudiza o lima diferencias. 


Contraste y armonía no son conceptos opuestos, están al mismo nivel; 


la armonía es una buena medida del contraste. 


A continuación se muestra la propuesta de Itten con sus propios ejemplos. 


De colores en si 

Contraste de tono, se da entre 
colores puros (saturados), 
luminosos y opuestos. 

Fara crearlo usar un minimo de 3 


De claro-oscuro 


De cualidad colores muy diferenciados. 
Especialmente activo entre colores 
De cålido-frio primarios y blanco y negro. Pierde 


contraste entre secundarios y 


De complementarios terciarios 


Simultáneo 


De cantidad w 
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2.6.2. Contrastes de color en la creación visual 


La clasificación de Itten sigue siendo una guía útil para afrontar la combina- 
ción práctica de colores. Pero su terminología no encaja exactamente con la 


terminología actual, resultado del desarrollo de las ciencias del color. 


Además hay dos contrastes que no están al mismo nivel que el resto. El con- 
traste de cantidad, como se ha dicho, se suma siempre a otro tipo de contraste 
y lo potencia. El que Itten llama contraste simultáneo es un fenómeno que 
se da en determinadas situaciones como efecto de la interacción entre colores 


pero no representa un contraste en el mismo sentido que el resto. 


Partiendo de la clasificación de Itten pero adaptándola a la terminología basa- 
da en los parámetros de tono, saturación y luminosidad se ofrece a continua- 
ción una clasificación propia que se usará para mostrar una serie de ejemplos 


aplicados. 


Contraste de tres 
o más tonos (primarios y 
secundarios) 


Contraste 
cálido-frío 


Contraste de 
complementarios 


Contraste de tonos 


contiguos 


Contraste fuerte de 
luminosidad 


Contraste suave de 
luminosidad 


Contraste de 
saturación 
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3. Introducción a la tipografía 


3.1. Tipografía: un medio gráfico para un mensaje verbal 


ESE: 








Algunos signos de escritura tienen su origen en un pictograma que ha evolucionado esquematizándose hasta un signo sin un 
sentido figurativo. 

Signo chino para el jarrón triangular "Ll": Originariamente es la representación de un jarrón y se estiliza hasta convertirse en 
el signo "li". 

Pictograma semítico "buey" (alef): Originariamente era la representación de un buey en los jeroglíficos egipcios y pasa a la 
escritura proto-sinaítica como signo consonántico. Luego se adapta y estiliza hasta convertirse en el signo consonántico "alef" y 
al pasar del alfabeto fenicio al griego se cambia al signo vocálico "A". 

Fuentes: 

J. P. Vita (2005). "Los pao sistemas alfabéticos de escritura". En: Gregorio Carrasco Serrano; Juan C. Oliva Monpean 
(coords.). Escrituras y lenguas del Mediterráneo en la antigúedad (págs. 33-79). Universidad de Castilla - La Mancha http:// 
hdl.handle.net/10261/13218 

Rastros del alfabeto: escritura y arte (1998). Barcelona: Fundació "la Caixa". 


A pesar de que algunas derivan originariamente de pictogramas, nuestras ac- 
tuales letras son signos arbitrarios que representan por convención un deter- 


minado sonido. 


El texto es la plasmación gráfica del lenguaje verbal. Su naturaleza visual in- 
fluye en la transmisión del mensaje. En la caligrafía y en la tipografía la legi- 
bilidad en función del soporte y el tipo de aplicación, la amenidad de lectura 


y su carácter gráfico influyen en el lector. 


En los trabajos de diseño la tipografía tiene un doble papel: es texto y es 
imagen. Se establece un compromiso entre su presencia gráfica con re- 
lación a otros elementos visuales y sus necesidades de legibilidad. Tam- 


bién está en juego la sintonía entre forma y contenido. 


3.2. Evolución histórica de la escritura 


El origen del alfabeto latino (y también del árabe, el hebreo y el griego) hay 
que buscarlo en el alfabeto fenicio derivado a su vez de los jeroglíficos egipcios 
a través del protosinaítico (Vita, 2005). 
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Las letras capitales de las lápidas romanas, equivalentes a nuestras mayúsculas, 
se transforman, a través de la escritura manual en la baja edad media, en las 
minúsculas. Será Carlomagno quien encargue poner orden a esta nueva for- 
ma de escribir, creándose la llamada caligrafía carolingia, la base de nuestras 


minúsculas. 


En el siglo XIII se consolida la caligrafía llamada gótica basada en el trazo de 


plumilla. 


En 1455 Gutenberg hace las primeras impresiones con imprenta de tipos 
móviles. Entre el siglo XV y XVI los tipógrafos venecianos renuevan la tipogra- 
fía haciéndola más clara y legible. En el siglo XVII tipógraftos como Baskervi- 
lle, Didot o Bodoni introducen variantes y matices. A principios del siglo XVIII 
hacen su aparición las letras de palo seco destinadas a la rotulación y a conti- 


nuación las conocidas como egipcias, letras también gruesas pero con remate. 


A principios del siglo xx hay una recuperación de las letras de palo seco que se 
refinan gracias a la aplicación de la coherencia geométrica. Por otro lado, se 
diseñan nuevas tipografías "romanas" con remates (como la Times) que desa- 
rrollan y actualizan el trabajo de los tipógrafos humanistas del renacimiento. 
En la mitad del siglo se presenta la Helvética una de las tipografías de palo 
seco más difundida. En la segunda mitad del siglo conviven las tendencias a 
conseguir una tipografía clara y legible para todo tipo de usos y aplicaciones; 
junto con la aparición de tipografías pensadas para la baja definición de las 
pantallas de los ordenadores y una gran profusión de tipografías decorativas, 


para rotulación y experimentales. 





Románica capitalis 


s.lacC monumentalis 
s. Villas. XI 
s. Xll a s. XV P pe wry - | ki I 
Y SENATVSPO PVIVSOVEROMANVS A 
Y IMPCAESARIDIVINERVAEFN ERVAE 
s. XIVas. XV 


MA TRAIAN OAVGGERMDACICOPONTIF 
Í MAXIMOTRIBPOTXVITIMPVICOSVIPP 


s. XV as. XVI htlp://commons.wikimedia.org/wiki/File:Forum_Trajana.jpg. 


s. XV as. XVI 
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3.3. El lenguaje tipográfico 


El conjunto de caracteres disponibles se llama fuente tipográfica. La 


gama de pesos, cursivas y anchos es conocida como familia. 


El lenguaje tipográfico 


Familia 


Negra Fina Negra 
Negra cursiva Fina cursiva Negra cursiva 
Redonda Extra negra Redonda Extra negra 
Cursiva Condensada Cursiva Condensada 
Negrita Negrita Ultracondensada 
Negrita cursiva 
Times New Roman Helvética 


El dibujo de la letra determina la familia. La familia tipográfica se suele identificar 
por el nombre de su creador o de la empresa que lo comercializa. 

Una familia suele incluir una gama de pesos, cursivas y anchos a los que 
llamamos estilos. Aquí se pueden comparar los distintos estilos de una misma 
familia tipográfica. 








Pasad el cursor sobre el texto para ver los diferentes elementos de la fuente. 


Además la larga tradición tipográfica ha ido creando un vocabulario específico 
para describir el aspecto y las partes de los caracteres tipográficos. Este lenguaje 
nos permite hablar de tipografía y comparar una fuente con otra. 


3.4. Anatomía del tipo 


Los tipógrafos muchas veces usan términos anatómicos para describir las par- 
tes y características de los caracteres tipográficos. La terminología puede variar 
según la tradición tipográfica y sus variantes culturales o geográficas. Aun así 
consideramos útil recoger este vocabulario que nos invita también a hacer una 


observación minuciosa de los detalles tipográficos. 


Partes del carácter tipográfico 








CC-BY-SA e PID_00191347 52 Conceptos básicos de diseño gráfico 





El lenguaje tipográfico 


Vocabulario para describir 








el carácter tipográfico Ejemplo 
Altura de la caja: Es la altura de las letras de caja alta de una fuente, tomada ¡Md o 
desde la linea de base hasta la parte superior del carácter. TAYTA L p- 
Altura de las ascendentes: Altura måxima de las ascendentes - astas de caja - - 
baja que sobresalen por encima de la altura de x. d p h X 


Altura M: Es la altura, tomada desde la linea de base hasta la parte superior 

del carácter, de la letra “M” en caja alta. En la práctica la altura de “M” suele 
usarse como referencia para la altura del tipo en una determinada fuente ¡IM 
tipográfica. Como las fuentes de caja alta suelen coincidir en altura la altura de 

“M” suele ser equivalente a la altura de mayúsculas en caja alta. 


Altura x: Es la altura de las letras de caja baja excluyendo los ascendentes y "NENE 
los descendentes. Se suele calcular precisamente a partir de la altura de la Mp hx: 
letra "x" de la caja baja. E = = 


Ancho M: : la "M" suele ser el carácter más ancho en una fuente tipográfica. A 
Por eso el ancho de la M se toma también como referencia para la métrica 
horizontal del carácter y como medida que puede servir para organizar de M 


forma coherente la composición. 


Anillo: Asta curva cerrada que encierra el blanco interno en letras como la "b", b d 

la "po la] la "o". 5 p q 
Ascendente: Asta de la letra de caja baja que sobresale por encima de la 

altura x, como en la "b", la "d" o la "k". La altura de las ascendentes puede ser D dh k 
igual o superior a la altura de "M" dependiendo del diseño de cada fuente 
tipográfica. 

Asta: Rasgo o trazo principal de la letra que define su forma esencial. () Vb p 
Asta ondulada: El rasgo principal de la "S" o la "s". También llamada espina. $ 

Astas montantes: Son las astas principales verticales u oblicuas de una letra, K Y 7 
como la L, B, VoA. 


Barra: El rasgo horizontal en las letras como la "A" y la "H". Referida a veces 
con el término más genérico de Asta transversal o Travesaño 


Blanco interno, contraforma o contrapunzón: Espacio en blanco contenido 
dentro de un "anillo" u "ojal". 


Brazo: Parte terminal que se proyecta horizontalmente o hacia arriba, como 
ocurre en la "E”, la “K” o la “L”. 


Cartela: Trazo curvo o poligonal de conjunción entre el asta y el remate. 
También llamado apófige. 


Cola o pata: Asta oblicua colgante de algunas letras, como la “R” o la “K” que 
se apoya en la línea de base. 


Cuello: Enlace de conexión entre el anillo y el ojal de la letra g. 


Descendente: Asta de la letra de caja baja que queda por debajo de la linea 
de base, como en la "p" o en la "g". 








Espina: Asta curvada que se traza de izquierda a derecha y de arriba a abajo 


en la “S y la “s”. $ 


Filete: Barra o trazo horizontal muy fino en el interior de letras como la “A” y la A H 
“H” i 

s h A 7 è 
Gancho: Parte inferior de la cola de la "g" y la *j". Q J 
Hombro o arco: Trazo curvado en la “h” o la "n" que conduce el asta hacia una h | 
pierna. ii 
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Inclinación: Ángulo del eje imaginario sugerido por la modulación de 

espesores de los rasgos de una letra. El eje puede ser vertical o con diversos 

grados de inclinación. El eje es una de las principales características que O () e e 
definen una familia de caracteres. 


Linea de base: La linea sobre la que se apoya la altura x. Mp | 


Ojal: Porción cerrada de la letra "g" que queda por debajo de la línea de base. 
Si ese rasgo es abierto, se le llama cola. 


Oreja: Ápice o pequeño rasgo terminal que a veces se añade al anillo de P 
algunas letras, como la "o", la "g"; o al asta de otras, como la "r". 

Pie: Terminal que se apoya en la linea de base en una letra mayúscula como la L 

"R" en una fuente con serif. 

Remate, gracia o serif: Trazo terminal de un asta, brazo o cola. Es un resalte 

ornamental o de refuerzo que no es indispensable para la definición del A | 
carácter. 

Rizo: Trazo curvo de entrada o salida que prolonga alguno de los trazos . 
principales. Es habitual en fuentes inspiradas en la escritura manual. eL TO, 
Travesaño o asta transversal: Trazo recto horizontal que cruza el asta ft 
central, como el trazo superior de la *T” o el trazo horizontal de la "t. 

Trazo: Una de las lineas que define la letra como tal, independientemente de \ A 
los terminales u ornamentos. A B ( j 
Trazo terminal: Terminación de los trazos del tipo. Puede ser con remates o Pe 
sin ellos. 


Unión: En una ligadura el trazo que une las dos letras. Las ligaduras son i 
caracteres formados por la unión de dos letras que también pueden escribirse fif f i f 
con caracteres separados. Tienen su origen en las prácticas de los copistas | 
medievales para escibir más rápido. 


Uña: Remate puntiagudo que suele aparecer en la “G” o la “S” en las fuentes i 

con terminales tipo romana. | 
Vértice: Punto exterior de encuentro entre dos trazos, como en la parte 

superior de una "A" o "M" o el pie de una "M". | M Y 


La larga tradición tipográfica ha ido creando un vocabulario para describir el aspecto y 
las partes de los caracteres tipográficos. Este lenguaje nos permite hablar de tipografía y 
comparar una fuente con otra. 


La caja alta y la caja baja 


Hablamos de caja alta o caja baja para referirnos a las mayúsculas (derivadas de las 
capitales romanas) y las minúsculas (originarias de la caligrafía medieval). Usamos este 
término más genérico porque, por ejemplo, unas versalitas serían unas letras de caja baja 
pero con estructura y apariencia de mayúsculas. 


Pero ¿de qué caja hablamos y por qué a veces es alta y otras veces baja? 


El origen de tal denominación procede de la composición de textos en tipos móviles. 
Cada fuente tipográfica se recogía en una caja con una casilla (o cajetín) para cada letra. 
Las que llamamos letras de caja alta se situaban en la parte superior de la caja y las de 
caja baja en la inferior. 


Observa que algunas letras (como la "c", la "d", la "e", ...) tienen el cajetín más grande 
porque, al ser más frecuente, la fuente incluye más tipos de estas letras. 
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3.5. Rasgos y terminales 


En un análisis del tipo podemos diferenciar entre rasgos y terminales. Los 
rasgos o trazos principales pueden ser uniformes si mantienen constante su 
grosor, y modulados si lo varían. En el caso de que exista modulación, ésta 
sugiere un eje que puede ser vertical o inclinarse en distintos grados depen- 


diendo de la tipografía. 


En la extremidad de los rasgos se pueden encontrar los trazos terminales — 
también llamados serifa, serif, remate o gracia. En función de la familia ti- 
pográfica los terminales son de una forma o de otra. Hay familias (las lineales 


o de palo seco) que sus trazos terminales no incluyen remates y son conocidas 


como Sans-serif o sin serifa. 









En botón ABCDEFGHIJKLMNOPQRSTUVXYZ 
ABCDEFGHIJKLMNOPQRSTUVXYZ 
abcdefghijklmnopgrstuvxyz 
xo abcdefghijkimnoparstuvxyz 


AAri 


Serif y sans-serif 





Rasgos y terminales 


3.6. Estructura geométrica del carácter tipográfico 


Si nos centramos en los elementos constitutivos básicos de las letras, éstas 


pueden caracterizarse según cuatro tipos de líneas: 


e rectas ortogonales: usa líneas rectas verticales y/o horizontales 
e rectas fragmentadas: usa líneas rectas combinando verticales y horizon- 


tales con oblicuas 
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curvas: usa líneas curvas 


mixtas: combina líneas curvas con líneas rectas 


ABCDEFGH 


IJEMNOPQ 
RSIUVXYZ 
KW 








Reconocimiento automático de caracteres 


El hecho de que todas las familias tipográficas compartan una estructura común ha per- 
mitido crear sistemas informáticos que a partir de la imagen de un texto son capaces de 
reconocer cada uno de sus caracteres como tal y convertirlo en texto editable. Son los 
programas llamados OCR (del inglés Optical Character Recognition, reconocimiento óptico 
de caracteres) que permiten convertir un texto en papel escaneado en texto apto para 
cualquier programa de tratamiento de texto. 


Los primeros programas OCR eran muy básicos y se crearon alfabetos expresos para ellos 
que eliminaban cualquier tipo de ambigüedad entre una letra y otra; actualmente, son 
capaces de reconocer un texto de cualquier tipografía mientras la imagen original no esté 


Ilan" 


dañada. Por ejemplo, una "n" mal impresa de forma que la segunda asta se pierda podría 


"MN! 


ser reconocida como una "r". 


¿Cómo lo hacen? ¿Cómo puede reconocer un sistema informático una forma, interpre- 
tarla y asignarle un carácter? 


A continuación se muestran esquemáticamente dos posibles modos de hacerlo. En el 
primero, el sistema tiene una serie de plantillas y comprueba si la imagen de entrada 
coincide con alguna de ellas. En el segundo, conocido como pandemonium (Selfridge, 
Lindsay y Norman) se utilizan las diferencias de estructura geométrica de los tipos para 
seleccionar las características coincidentes. 


Letra Plantilla Coincidencia 


AA 
Ro 


Identificación de un carácter en base a la comparación con plantillas. 
Fuente: Johannes M. Zanker [consulta 7-2009]. Visual Perception Il: Objecte recognition. 
http://www.pc.rhul.ac.uk/staff/].Zanker/ 
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Demonios de Demonios 
características cognitivos 


Líneas 


horizontales 4 





Demonio 
de la 
imagen 





Demonio 
de decisión 








Curvas 


Procesamiento... 
“h af continuas 


cortical de 
la señal 


Identificación de un carácter en base al pandemonium. 
Fuente: Peter H. Lindsay; Donald A. Norman (1983). Introducción a la Psicología Cognitiva (ed. original 1977). 
Madrid: Tecnos. 


3.7. Clasificación de las familias tipográficas 


Es evidente que hay familias tipográficas que tienen aspectos y características 
similares. Pero el intento de clasificarlas en grandes grupos no ha dado con un 
sistema definitivo, entre otras cosas porque se siguen diseñando nuevos tipos, 


algunos de ellos de difícil clasificación. 


Los esfuerzos por ordenar las fuentes en categorías tienen como propósito en- 
tenderlas mejor y poder combinarlas con éxito. La clasificación puede adoptar 
uno o varios criterios combinados: por fechas, por su evolución, por las formas 


intrínsecas de los tipos, por sus elementos clave, etc. 


Una distinción muy clara y comprensible es la que se establece entre familias 


tipográficas con remate o sin remate: 


e Con remate o serifas: los caracteres con remate o serifa presentan peque- 
ños trazos en sus astas verticales y horizontales, ello facilita su lectura pues- 
to que nos ayudan a reconocer los caracteres, sobre todo en material im- 
preso (los libros). Su origen es más antiguo que las sin remate y se remon- 
tan a la recuperación de las formas romanas en el Renacimiento, aunque 


se siguen creando nuevas tipografías con remates en la actualidad. 
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e Sin remate, lineales, Sans-serif o De palo seco: se caracterizan porque no 
tienen remates o serifas en sus trazos terminales. Sus rasgos suelen tener 
menos variaciones, una mayor altura de la "x" y, por lo general, una menor 
inclinación de los trazos. Son fuentes de origen más moderno, los primeros 


tipos empiezan a crearse en los últimos años del siglo XIX. 


Pero incluso atendiendo sólo a los remates esta distinción básica resulta insu- 
ficiente. Observando las fuentes con remates podemos formar algunos gran- 
des grupos en función de la forma y tamaño de los mismos. Una clasificación 
básica basada en los trazos terminales según tengan o no remate y según la 


forma de los remates puede ser la siguiente: 


e Romanas antiguas, 

e De bloque Serif o Egipcias, 

e Romanas modernas o Didonas, 
e Lineales o De palo seco, 


e De escritura. 


AQTErtmp AQTErtmp 





Romanas antiguas De bloque serif o egipcias 


AQTErtmp AQTErtmp 


Romanas 
modernas o didonas Lineales o de palo seco 


ADTErbmp 


Escritura 





La clasificación que acabamos de presentar se basa en la que Francis Thibau- 
deau (1860-1925) desarrolló entre 1921 y 1924 para la elaboración de catálo- 
gos tipográficos. Es una de las primeras clasificaciones que atiende a las carac- 
terísticas formales del tipo sin supeditarlas a los factores históricos. Su clasifi- 
cación, que marcará las propuestas posteriores, se basa en 4 familias básicas 
que completa con dos categorías menos definidas para dar cabida a las fuentes 
de escritura y las de fantasía, éstas últimas para los caracteres de los carteles 


publicitarios. Sus cuatro categorías básicas son las siguientes: 


e  Elzévir (romanas antiguas): terminales triangulares 
e Didot (romanas modernas): terminales filiformes 

e  Egyptienne (de bloque): terminales cuadrangulares 
e Antique (de palo seco): ausencia de terminales 
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M A Elzévir M A Egyptienne 
V | A Didot M Ll Antique 


La clasificación de Thibaudeau se fija en la forma de los tipos y principalmente en los remates. 





En 1959 el tipógrafo italiano Aldo Novarese (1920-1995) desarrolla una clasi- 
ficación algo más extensa también muy centrada en las diferencias entre ter- 
minales. Su clasificación tiene diez grandes familias, entre las que se incluye 
también las de fantasía que sirve en cierto modo de "cajón de sastre" para las 


fuentes que no concuerdan con el resto de categorías: 


1) Lapidari (lapidarias) 
2) Medievali (medievales) 


3) Veneziani (venecianas) 





4) Transizionali (transicionales) 
5) Bodoniani (bodonianas) RApIcal maca 
6) Scritti (escritura o de inspiración caligráfica) 
7) Ornati (ornadas) 


8) Egiziani (egipcias) 


e 
La 





9) Lineari (lineales) Medieval Egipcia 
10) Fantasie (fantasía) 


Ya hemos visto en el apartado anterior que no son sólo los remates lo que 





define una fuente, hay otras características de sus trazos y sus proporciones 
que la definen y le confieren identidad. Analizando todos estos aspectos y veneciana Lineal 
teniendo en cuenta su evolución histórica diversos autores han propuestos 
sistemas de clasificación tipográfica más completos. Una de las clasificaciones 


más asentadas es la conocida como Vox-ATypI. Otros intentos de clasificación 





se basan en ella para corregirla o completarla. z ; 
Transicional Fantasía 


3.7.1. Clasificación tipográfica Vox-ATypI 


En 1954 el diseñador e historiador tipográfico Maximilen Vox (1894-1974) 


propuso un sistema de clasificación de las fuentes tipográficas basado en 9 Bodoniana Escritura 





categorías: Las diez grandes familias de Aldo Novarese. 


1) Humanísticas 
2) Garaldas 

3) Reales 

4) Didonas 

5) Mecánicas 

6) Lineales 
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7) Incisas 
8) De escritura 
9) Manuales 


La clasificación de Maximilien Vox es adoptada y completada en 1962 por la 
ATypl (Association Typographique Internationale) que la traduce al inglés y al 
alemán buscando una terminología para las categorías que pueda ser recono- 
cida tanto en las lenguas latinas como en las anglo-germánicas. Se incorporan 
dos categorías más, llegando hasta once: las Fracturas (para las fuentes inspi- 
radas en la escritura medieval o gótica) y las No-latinas (un "cajón de sastre" 
que engloba las tipografías en caracteres no-latinos). 


La clasificación Vox-ATypl tiene en cuenta la evolución histórica de las tipo- 
grafías pero, sobre todo, sus características formales: forma de las terminales; 
modulación y ancho del trazo; eje de inclinación; relación entre la altura de 


la caja alta; las terminales y la altura de "x"; etc. 


Las 11 categorías se agruparon en 4 grandes grupos quedando la clasificación 


de la siguiente manera: 


1) Clásicas 


e Humanísticas 
e  Garaldas 


e Reales 


2) Modernas 


e  Didonas 
e Mecánicas 


e Lineales 


3) Caligráficas 


e  Incisas 
e Scripts o de escritura 
e Manuales 


e Fracturas 

4) No-latinas 

e  No-latinas 

En 1964, tomando como base la clasificación definida por ATyplI, el Institu- 
to Alemán de Normalización (DIN, por las siglas de Deutschen Instituts für 


Normung) definió su propio estándar de clasificación, la norma DIN 16518. 


En ella tomaba las 11 categorías de ATypl y, respondiendo a una rica tradi- 





ATypl (Association 


Typographique 
Internationale) 





La ATypl es la asociación inter- 
nacional tipográfica (el acró- 
nimo se obtiene de su nom- 
bre oficial en francés Associa- 
tion Typographique Internatio- 
nale). Fue creada en 1957, ini- 
cialmente como un grupo de 
creadores y distribuidores de 
fuentes tipográficas. Entre los 
años ochenta y noventa del si- 
glo xx se incorporaron a la or- 
ganización creadores indepen- 
dientes de fuentes y diseñado- 
res usuarios de fuentes tipo- 
gráficas. 


Anualmente convoca una con- 
ferencia internacional que en 
cada edición tiene una ciudad 
distinta como sede. 


El sitio web oficial de la 
ATypl es el siguiente: http:// 
www.atypi.org/ 
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ción propia, dividía dentro de las Fracturas 5 subcategorías: Gotisch (gótica), 
Rundgotisch (gótica rotunda), Schwabacher (Schwabachiana o al estilo de Sch- 


wabach), Fraktur (fractura), Fraktur- Varianten (variantes de fractura). 


En 1967, el organismo británico de estandarización (British Standard Body) 
adopta también la clasificación de ATypI creando la especificación British Stan- 
dardS 2961 o BS 2961. Esta clasificación tomó las nueve categorías iniciales de 
Vox pero dividiendo las lineales en cuatro subcategorías según sus característi- 
cas: grotesque (grotescas), neo-grotesque (neo-grotescas), geometric (geométricas) 


y humanistic (humanistas o lineales neo-humanistas). 


A continuación se presentan las once categorías con sus características, con- 
texto histórico y ejemplos que las ilustran. Se ha expandido la categoría de 
lineales en tres subcategorías según sus características siguiendo la clasifica- 
ción de Lewis Blackwell'” basada en BS2961. También hemos agrupado la ex- 
plicación de la categoría de escritura con la manuales. Hemos añadido además 


nuestro propio "cajón de sastre" de inclasificables. 


Equivalencias entre taxonomías tipográficas relacionadas con VOX/ATypI 


VOX (1954) VOX/ATy- DIN 19518 (1964) BS 2961 (1967) 


pl (1962) 





re o 
1. Humanísticas I. Humanísticas 
2. Garaldas II. Garaldas 
3. Reales III. Reales 
pem ooo 
4. Didonas IV. Didonas 
5. Mecánicas V. Mecánicas 
6. Lineales VI. Lineales 
mo 
pam 
MO 
PA 


Vl.a. Grotescas 


VI.b. Neogrotescas 


VI.d. Humanísticas 


7. Incisas VII. Incisas 
8. Scripts VIII. Scripts 
9. Manuales IX. Manuales 


Fuente: Wikipedia. Viquiproyecto Tipografia (UOC 2010). 








Blackwell, 1998 
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VOX (1954) VOX/ATy- DIN 19518 (1964) BS 2961 (1967) 


pl (1962) 





IN EI 
O 
a 
DN EIN 
rn 
CECI ooo 


Fuente: Wikipedia. Viquiproyecto Tipografia (UOC 2010). 


Humanísticas 


Origen 


Grupo: Clásicas — Categoría VOX/ATypl: Humanísticas. 


Por su vinculación histórica con las corrientes humanísticas en el siglo Xv. 
Francés: Humanes. Inglés (BS 2961): Humanistic. Alemán (DIN 16518): 
Venezianische Renaissance Antiqua. 


Otras denominaciones: Venecianas (por ser creada por los tipógrafos venecianos como 
Nicolas Jenson, Aldo Manuzio o Francesco Griffo), Antiqua o Antigua (sobre todo en Alemania, 
por contraposición a los tipos góticos). 


Características 


Contraste pobre entre los trazos gruesos y finos. Modulación oblicua. Trazos terminales gruesos e 
inclinados. Totalmente oblicuos en los terminales de los trazos ascendentes. El filete de la “e” de caja 
baja es inclinado. Tiene un peso intenso en su apariencia general. 


Contexto 


Fuentes que aparecen junto a los escritos humanistas del siglo XV. Fueron creadas por los tipógrafos 
venecianos por contraposición al tipo “gótico” de inspiración caligráfica en el que se había basado 
Gutenberg para los primeros tipos móviles. Los tipógrafos humanistas hicieron una fusión entre la 
escritura minúscula carolingia y las letras capitales romanas. La denominación Antiqua (antigua) se 
usó porqué creían inspirarse en la forma de escribir de la antigúedad clásica. La denominación se ha 
mantenido en Alemania donde desde la reforma protestante hasta 1941 fue habitual usar los tipos 
góticos. Por eso la denominación Antiqua forma parte en alemán de muchas de las categorías aquí 
presentadas. 


Ejemplo 


Humanistas o venecianas 


Abefgor 


Centaur ~ Venetian 301 


abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPORSTUVWXYZ 
1234567890 


Fuentes tipográficas: Centaur, Kennerly, Cloister... 
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Grupo: Clásicas — Categoria VOX/ATypl: Garaldas. 


Por la contracción del nombre de dos tipógrafos: Garamond y Aldus. 
Francés: Garaldes. Inglés (BS 2961): Garaldic. Alemán (DIN 16518): Franzósische Renaissance Antiqua. 


Otras denominaciones: Lapidarias, Romanas antiguas (ambas por la inspiración en la escritura en 


lápidas de los romanos o en los escritos carolingios que los humanistas creyeron romanos) o 
Elzévir (por la familia de tipógrafos holandeses de origen árabe del siglo XVII). 


Caracteristicas 

Contraste medio entre trazos gruesos y finos. Modulación oblicua. Tienen trazos terminales inclinados. 
El filete de la “e” de caja baja es horizontal. Tienen un peso medio en su apariencia general. La caja 
alta es más corta que las ascendentes de la caja baja. 

Contexto 
Los primeros modelos son los del impresor veneciano Áldo Manuzio y el estampador Francesco 
Griffo, y suponen una reforma y mejora de los tipos humanisticos. Sobre estos modelos el estampador 
y diseñador francés Claude Garamond (1500-1561) crea nuevas familias tipográficas. 
Se incluye en este grupo una de las tipografías más extendidas y usadas: la Times, diseñada por el 
historiador tipográfico Stanley Morrison en 1932 para el periódico londinense The Times, inspirándose 
en las fuentes garaldas. 

Ejemplo 


Garaldas o romanas antiguas 


Abefgor 


Times New Roman 


abcdefghiklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPORSTUVWXYZ 
1234567890 


Fuentes tipográficas: Garamond, Times New Roman, Bemba... 
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ES 


Origen 





Grupo: Clásicas — Categoría VOX/ATypl: Reales. 
Por desarrollarse a iniciativa del rey Luis XIV de Francia. 


Francés: Réales. Inglés (BS 2961): Transitional. Alemán (DIN 16518): 
Barock-Antiqua / Vorklassizistische Antiqua. 


Otras denominaciones: Transicionales, De transición o Romanas de transición (por estar en la 
transición entre romanas antiguas y modernas). 


Características 


Contraste medio o alto entre los trazos gruesos y finos. Modulación vertical o casi vertical. Tiene 
trazos terminales delgados ligeramente inclinados u horizontales. El filete de la "e” de caja baja es 
horizontal. 


Contexto 


Los tipógrafos más relevantes en este grupo son el inglés John Baskerville (1706-1775) y el fundidor 
francés Pierre-Simon Fournier (1712-1768). 

Son el resultado del impulso del rey francés Luís XIV al desarrollo de nuevas formas tipográficas para 
rivalizar con otros países y mantener la tradición del desaparecido Claude Garamond. 

Se llaman De transición porque suponen un estadio intermedio a nivel formal entre los tipos romanos 
“antiguos” y los “modernos” especialmente visible en los remates que abandonan la curvatura en su 
parte inferior y se aplanan sobre la línea de base, manteniendo aún la inclinación en triángulo en la 
parte superior que desaparecerá con las didonas. 


Abetgor 


abcdefghuklmnopqrstuvwxvyz 
ABCDEFGHIKELMNOPQRSTUVWXYZ 
1234567890 


Fuentes tipográficas: Baskerville, Fournier, Caslon... 
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Origen 





Grupo: Modernas — Categoría VOX/ATypl: Didonas. 
Por la contracción del nombre de dos tipógrafos: Didot y Bodoni. 
Francés: Didones. Inglés (BS 2961): Didone/Didonic. Alemán (DIN 16518): Klassisistische Antiqua. 


Otras denominaciones: Romanas modernas (porque culminarían una evolución desde los primeros 
tipos inspirados en la lapidaria romana y los textos carolingios). 


Características 
Contraste extremo entre los trazos gruesos y finos. Modulación vertical. Trazos terminales 


horizontales, delgados (en algunos casos filiformes) y generalmente encuadrados (no van 
disminuyendo de grueso en cuña). 


Contexto 
El francés Firmin Didot creó en 1784 una fuente tipográfica que aprovechaba las mejoras en la calidad 
del papel y la impresión. En 1787 el maestro impresor italiano Giambattista Bodoni creó una nueva 
tipografía basada en aquélla. Los tipos modernos fueron los estándar para textos hasta los últimos 
años del siglo XIX. 
La clasificación como Romanas modernas señala que son una evolución de las antiguas (inspiradas 


aquellas en la lapidaria romana y los textos carolingios que los humanistas del Renacimiento creyeron 
romanos) y que nacen en el inicio del período histórico moderno. 


Ejemplo 


Didonas o romanas modernas 


Abefgor 


Bodoni 


abcdefghijklmnopqrstuvwxyz 


ABCDEFGHIJKEMNOPQRSTUVWXYZ 
1234567890 


Fuentes tipograficas: Bodoni, Walbaum, ITC Zapf Book... 
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Mecánicas 


Origen 





Grupo: Modernas — Categoría VOX/ATypl: Didonas. 
Por el aspecto mecánico de sus trazos y por su aparición junto a la industrialización. 
Francés: Mécanes. Inglés (BS 2961): Mechanistic. Alemán (DIN 16518): Serifenbetonte Linear Antiqua. 


Otras denominaciones: Egipcias (porque su aparición coincide con la moda de lo egipcio en Europa); 
Square-Serif, Slab-Serif o Remate en bloque (por la contundencia del grueso de sus remates). 


Características 


No hay contraste entre los trazos. Modulación vertical. Trazos terminales horizontales, del mismo 
grosor que las astas y generalmente encuadrados. Gran altura de x. La “g” de caja baja prácticamente 
no desciende. 


Contexto 


Surgen en Inglaterra a partir de 1817, destinadas a la rotulación y la publicidad. Pensadas para 
producir mayor impacto por su peso, estructura mecánica y monolínea. Como titulares, solían 
acompañar textos que usaban fuentes tipográficas modernas. Clarendon (1845) es la fuente 
prototípica de este grupo. A partir de 1920 se diseñan tipos con remates en bloque basados en 
geométricas de palo seco como Futura. La fuente Rockwell (de 1934) es una de ellas. En 1967 
Adrian Frutiger presenta la Serifa como versión slab-serif de su tipografía Univers. 


El nombre de Egipcias parece responder al gusto por lo egipcio en el momento de su aparición, pero 
no guarda ninguna relación formal con la escritura jeroglífica del antiguo Egipto de los faraones. Se 
han asociado al folklore del Far West norteamericano y muy especialmente a los westerns del cine. 
También son muy usados en camisetas deportivas. 

Ejemplo 


Mecánicas 


Abeígor 


Rockwell ~ Geometric Slabserif 712 





abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKELMNOPORSTUVWXYZ 
1234567890 


Fuentes tipografías: Clarendon, Rockwell, Serifia... 
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Lineal a. Grotescas 


Origen 





Grupo: Modernas — Categoría VOX/ATypl: Lineales — Categoría BS 2961: Lineales grotescas — 
Categoria Lewis Blackwell: Lineal b. 


Por carecer de remates y centrar la atención en las líneas. 
Francés: Linéales. Inglés: Lineal grotesque. Alemán: Serifenlose Linear Antiqua. 
Otras denominaciones: De palo seco, Sans serif o simplemente Sans (por carecer de remates); 


Grotescas (por las inscripciones rupestres); Góticas (por tener un peso fuerte de negro como los 
tipos góticos y como referencia a su origen germánico). 


Características 


Cambios de contraste de grosor en la caja baja. Modulación vertical. Sin remates. Cierta dureza en 
sus curvas. Ojal cerrado de la "g" de caja baja. Suele tener un gran peso en su apariencia general. 


Contexto 


Entre finales del siglo XVIII e inicios del XIX los arquitectos neoclásicos empiezan a usar letras sin 
remates en sus dibujos y esa tendencia se traslada a otras producciones gráficas, como la publicación 
impresa European Magazine (1805) o la cartografía (1816). 


William Thorowgood de la fundición Fann Street Foundry empezó a utilizar en 1832 la denominación 
grotesque tomada del italiano grottesco, referido a las inscripciones en las cuevas. 


En la tradición norteamericana son conocidas como góticas (gothics) probablemente como sinónimo 
de “germánicas” por el origen de algunos de sus creadores o difusores. Aunque también se ha dado 
la explicación de que se refiere a su peso visual, equivalente al de los tipos góticos. 


Ejemplo 


Lineal a, grotescas de palo seco o sans serif 


Abefgor 


Franklin New Gothic 
abcdefghijklmnoparstuvwxyz 
ABCDEFGHIJKLMNOPORSTUVWXYZ 
1234567890 


Fuentes tipográficas: New Gothic, Franklin New Gothic, trade G ... 
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Lineal b. Neo-grotescas 


Origen 





Grupo: Modernas — Categoría VOX/ATypl: Lineales — Categoría BS 2961: Lineales geométricas — 
Categoría Lewis Blackwell: Lineal c. 


Por carecer de remates y centrar la atención en las líneas. 
Francés: Linéales. Inglés: Lineal neo-grotesque. Alemán: Seriífenlose Linear Antiqua. 


Otras denominaciones: De palo seco o Sans-serif o simplemente Sans (por carecer de remates); 
Geométricas (por basarse en formas geométricas simples y en la regularidad en el trazo). 


Características 


Contraste de grosor de trazo menor que las grotescas. Se aleja de la escritura a pluma. Modulación 
vertical. Sin remates. Bocal de la “C” más abierto. La “G” de caja alta tiene una uña. La “g” de caja 
baja tiene el ojal abierto. Suele tener un peso importante en su apariencia general si no se trata de 
versiones finas o light. 


Contexto 


Akzidenz Grotesk lanzada por la fundición Berthold en 1896 y conocida en América como Standard 
es una de las primeras de este grupo. 


De su influencia en los tipógrafos de la escuela de diseño suiza nacieron tipografías como la 


Helvética (de Max Miedinger y Edouard Hoffman) y Univers (de Adrian Frutiger). Se inspiran en las 
conocidas como grotescas, depurando sus formas. 


Ejemplo 


Lineal b, neo-grotescas de palo seco o sans serif 


Abetfgor 


Helvetica 


abcdefghijkimnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890 


Fuentes tipográficas: Univers, Akzidenz Gritesk, Helvetica ... 
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Lineal c. Geométricas 


Origen 





Grupo: Modernas — Categoría VOX/ATypl: Lineales — Categoría BS 2961: Lineales geométricas — 
Categoría Lewis Blackwell: Lineal c. 


Por carecer de remates y centrar la atención en las lineas. 
Francés: Linéales. Inglés: Lineal neo-grotesque. Alemán: Serifenlose Linear Antiqua. 


Otras denominaciones: De palo seco o Sans-serif o simplemente Sans (por carecer de remates); 
Geométricas (por basarse en formas geométricas simples y en la regularidad en el trazo). 


Características 
Sin modulación. El eje se percibe como vertical. El grosor de los trazos tiende a ser constante. Sin 
remates. Tipos construidos a partir de las formas geométricas básicas (cuadrado, triángulo, circulo). 
La "A" de la caja alta suele terminar en vértice puntiagudo. La *G” de la caja alta no tiene uña. 
Contexto 
Tipos que responden a las ideas racionalistas y guardan unas proporciones clásicas. 


El más conocido y consolidado en su uso es Futura, diseñada en 1927 por Paul Renner. 


Se clasifican como geométricas por su base constructiva. 


Ejemplo 


Lineal c, geométricas de palo seco o sans serif 


Abefgor 


Avant Garde 





abcdaefahijkimnoparstuvwxyz 
ABCDEFGHIJKLMNOPORSTUVWXYZ 
1234567890 


Fuentes tipográficas: Futura, Kabel, Avant Garde... 
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Incisas 


Origen 





Grupo: Caligráficas — Categoría VOX/ATypl: Incisas. 

Porque su forma recuerda las de las incisiones en piedra o metal. 

Francés: Incises. Inglés (BS 2961): Incised. Alemán (DIN 16518): Sonstige Antiqua Varianten. 
Otras denominaciones: Glíficas o Glyphic (por recordar el tallado en piedra —glifos—, del griego 
'"para esculpir o tallar'); algunas dentro de este grupo también se pueden considera lineales 


humanistas o neo-humanistas (por ser sin remates o con remates sólo insinuados pero basarse en la es 
proporciones de las letras "romanas” humanistas). 


Características 
Con similitudes con las lineales aunque sus trazos terminales apuntan remates pequeños y 
triangulares que sugieren una línea de lectura como las romanas. Modulación media en el trazo que 
se puede afilar en los puntos de unión. Su ojo es grande. Sus formas parecen cinceladas. 
Contexto 
Difundidas a partir de las décadas de los 50 y 60 del siglo XX. 


Algunas fuentes características son la Optima de Herman Zapf de 1958 o la Albertus diseñada por 
Berthold Wolpe entre 1932 y 1940. 


Ejemplo 


Incisas, Glificas o Glyphic 


Abefgo 


abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIKLMNOPQRSTUVWXYZ 
1234567890 


Fuentes tipográficas: Optima, Albertus, ... 


Albertus 
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De escritura y manuales 


Origen 
Grupo: Caligráficas — Categorias VOX/ATypl: De escritura y Manuales. 
Porque imitan el trazo de la escritura caligráfica o rotulada. 
Francés: Scriptes. Inglés (BS 2961): Script. Alemán (DIN 16518): Schreibschriften. 


Otras denominaciones: Caligráficas (por el trazo caligráfico); Scripts (por la escritura). 


Características 


La categoría de las de escritura es un grupo muy amplio que comparte la inspiración en la escritura 
caligráfica. Imita el trazo y los enlaces de la escritura manual. Suele ser inclinada. Hay diversas 
variantes que siguen las diversas tradiciones caligráficas. 

Las clasificadas como manuales también comparten la inspiración en la escritura manual pero en vez 
de la caligrafía enlazada toman como referencia la escritura a pincel o con pluma, intentando 
mantener (o más bien reproducir) la calidad gráfica del trazo manual. 


Contexto 


Se basan en imitar la escritura manual en un intento de simularla. En las llamadas De escritura el reto 
es conseguir una unión creíble entre caracteres para imitar la escritura continua. Hay familias que 
simulan distintos tipos de herramienta (plumilla, pincel) o con diversos niveles de floritura. Son usados 
habitualmente en participaciones de boda y tarjetas de visita convencionales. Una variante que simula 
una caligrafía redonda, con blancos internos muy abiertos y modulación vertical ha sido usado en 
libros de texto como aproximación a la caligrafía de "maestro de primaria", destinadas a facilitar la 
lectura y el aprendizaje de la escritura a los niños. 


Ejemplo 


De escritura, imitación de caligrafía o "script" 





Brush Script Std 
ABCDEFGHIORLMNOPLESTUVIONYG 
[254567890 


Manual 


Ases, gor 


Fuentes tipográfcas: Snell R., Shelley Andante, Brush Script Std, AlphaMac aoe... 
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Fracturas 


Origen 





Grupo: Caligráficas — Categorías VOX/ATypl: Fracturas. 

Del alemán Fraktur (fractura). 

Francés: Fractures. Inglés (BS 2961): Black Letter. Alemán (DIN 16518): Gebrochen Schriften. 

Otras denominaciones: Góticas (por la inspiración en la tradición medieval que incorpora elementos 
decorativos a la escritura carolingia); Black-letter (por su rotundidad y el peso de negro que aporta a la 
página); Textura (por la variante más rectilínea y angulosa, opuesta a la más abierta "rotunda”). 

En septiembre de 2010 la ATyp! reunida en Dublín añadió una nueva categoría llamada Gaelica 
(Gaelic) en el grupo de las letras caligráficas. Otra letra inspirada en la escritura medieval, en este 


caso de la tradición británica (principalmente irlandesa y escocesa). 


Características 


Agrupa los caracteres conocidos también como góticos inspirados en la escritura medieval 
manuscrita re-inventada. 


Aporta una alta densidad de negro a la página. La estructura del tipo es densa, prima las líneas 
verticales y las terminaciones oblicuas y puntiagudas; rompe los trazos curvos. 


Contexto 
Sigue una larga tradición que prima el uso decorativo del tipo sobre su legibilidad. Es creada y se 
difunde rápidamente a principios del siglo XVI en el área germánica y será ampliamente usada en 
Alemania hasta mediados del siglo XX. Gutenberg la usará en su primera imprenta de tipos móviles. 
El movimiento nacionalsocialista la usará inicialmente como tipografía tipicamente germánica pero 
luego en 1941 por un decreto del régimen será considerada indeseable (por ser usada en los escritos 
judios) y se recomendará la antiqua (sans-serif) para la escritura normal. 
Existen diversas variantes según la escuela caligráfica, el estilo o el área geográfica de difusión. 


Ejemplo 


Fracturas, Góticas, Black-letter o Textura 


Abefqor 


Old English 


abodefabijklmnopgrstubiuxp3 
ABCEDESFODITRIMNOPYORSTUVDOXDZ 
1234567890 


Fuentes tipográficas: Fraktur, Old English, Koch Fraktur, Wedding Text, Forte Grotisch 
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Origen 





Grupo: No-latinas — Categorías WOX/ATypl: No-latinas. 
Francés: Non latines. Inglés (BS 2961): Non latin. Alemán (DIN 16518): Fremde Schriftarten. 


Esta categoría es un cajón de sastre chapuzero del sistema de clasificación de ATypl. Ver las 
subpestañas "Características" y "Contexto" de esta tabla. 


Características 


Esta categoría muestra el carácter pragmático y eurocéntrico de la clasificación de Vox-ATypl. Las 
categorias son útiles para un catálogo de tipos pero el rigor y el detalle que muestra en la 
diferenciación entre familias tipográficas latinas es abandonado para cualquier otro alfabeto. 


En los últimos años se han desarrollado variedad de fuentes no-latinas con diversidad de soluciones 
gráficas para un mismo alfabeto, a menudo inspiradas en las categorías tipográficas que hemos visto 
aqui. 


Contexto 


Los tipógrafos occidentales, con excepciones, han descuidado a menudo la tipografia con fuentes no 
latinas. Á pesar de que algunos sistemas de escritura, como el alfabeto griego o cirílico, tienen 
tradiciones tipográficas bien consolidadas y otros, como los abjads árabe y hebreo y una gran 
cantidad de escrituras asiáticas, tienen una larga tradición caligráfica y un, más reciente, desarrollo 
tipográfico. 


El enfoque multicultural actual de la web y los sistemas operativos, junto al desarrollo de las 
herramientas digitales de creación tipográfica han dado lugar a un despertar de las fuentes 
tipográficas no-latinas; sobretodo a partir de finales de los años 90 del siglo XX y la primera década 
del s. XXI. Para algunas escrituras el primer reto fue disponer de una fuente tipográfica y ahora 
mismo ya se trata de disponer de diversidad de fuentes para responder a aplicaciones y estilos 


distintos. 

Ejemplo 
No-latinas 
Centaur ~ Venetian 301 


abcdefghijkimnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQRSTUVWXYZ 
1234567890 


Fuentes tipográficas: Centaur, Kennerly, Cloister... 
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Inclasificables 


Origen 
Otras denominaciones: fantasía, decorativas, ... 


Características 


Reunimos aquí tipografías que son la pesadilla de quien intenta una clasificación. Hay todo tipo de 
características. Tipografías inspiradas en el art noveau o modernismo, usadas para rotulación de 
tiendas o portadas de disco. Una amplia gama creada para la baja resolución de las pantallas de los 
ordenadores, de las impresoras o para un buen reconocimiento digital de caracteres (OCR). Y 
también en aquellas que, desde un punto de vista actual, reúnen rasgos de distintos grupos 
anteriormente explicados. 


Contexto 


Hay categorías como decorativas, de rotulación, de fantasía, electrónicas que han intentado reunir 
algunas de estas características en grupos. 


Quizás nos falte perspectiva histórica para saber si podremos encajarlas en nuevos grupos o la 
clasificación de tipografías será un tema definitivamente abierto. 


Ejemplo 
Inclasificables 


OCR A Extended 


abcdefghijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPARSTUVUWXYZ 
12345678390 


Souvenir Lt BT 


abcdefahijklmnopqrstuvwxyz 
ABCDEFGHIJKLMNOPQORSTUVWXYZ 
1234567890 


Fuentes tipográficas: Friz Q., Souvenir, OCR A, Cooperplate... 


3.7.2. Bringhurst, una clasificación historicista 


Los sistemas de clasificación que hemos visto hasta aquí tienen criterios que 
pueden ser discutibles o problemáticos. El sistema de Vox/ATypI mezcla crite- 
rios historicistas y formales para establecer las categorías que, además, tienen 


denominaciones un tanto caprichosas. 


Robert Bringhurst (nacido en 1964) —poeta, escritor y tipógrafo canadiense- 
propuso en 1992 un sistema de clasificación centrado en los criterios histori- 


cistas, con categorías equivalentes a las que se usan en la historia del arte: 


Renacentistas. Desarrolladas a partir de la caligrafía por escribas y eruditos 


humanistas del norte de la península itálica entre los siglos XIV y XV. 


Tienen trazo modulado pero sin mucho contraste, un eje oblicuo, remates 


finos, baja altura de x, grandes aberturas, anillos casi circulares. 


Familias en esta categoría: Centaur, Bembo, Garamond. 


Barrocas. Desarrolladas durante los siglos XVII y XVIII. Se apartan de la es- 


critura caligráfica. 
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Moduladas con más contraste que las renacentistas, aberturas más mode- 
radas, eje variable, incluyen cursiva como complemento de la redonda. 


Familias en esta categoría: Janson, Caslon, Garamond. 


e  Neo-clásicas. Desarrolladas a partir del siglo xvii en Francia. 
Eje vertical, moduladas con contraste moderado, remates en forma de lá- 
grima. 


Familia en esta categoría: Baskerville. 


e Románticas. Desarrolladas entre los siglos XVIII y XIX, abandonan la ins- 
piración caligráfica y pasan a ser letras "dibujadas". 
Moduladas con contraste extremo, remates finos y terminales redondea- 
dos, aberturas pequeñas, eje principal vertical y secundario oblicuo en al- 
gunas letras. 


Familias en esta categoría: Bodoni, Didot, Bulmer. 


e Realistas. Desarrolladas entre los siglos XIX y XX a partir de las formas 
básicas de las "romanas" pero sin modulación. 
Sin remates o con remates en bloque, no moduladas, con trazo uniforme, 
con eje vertical, aberturas pequeñas. 


Familias en esta categoría: Franklin Gothic, Helvetica. 


e  Modernistas geométricas. Desarrolladas en el siglo xx buscando la estruc- 
tura de las formas geométricas básicas como el círculo y la línea. 
Sin remate o con remate igual en peso al trazo, sin modulación, sin eje, 
anillos circulares. 


Familias en esta categoría: Futura, Memphis. 


e  Modernistas líricas. Son fruto del redescubrimiento, en el siglo xx, de las 
formas renacentistas. 
Trazo modulado, remates finos. 


Familias en esta categoría: Palatino, Dante, Pontifex. 


e  Post-modernistas. Desarrolladas a partir de finales del siglo XX a partir de 
la revisión, hibridación o parodia de formas neoclásicas y románticas. 
Eje vertical, remates bruscamente modelados. 


Familias en esta categoría: Espirit, Nofret. 


3.7.3. PANOSE, una clasificación formalista 


Al contrario que la propuesta de Bringhurst, el sistema PANOSE busca clasificar 


las familias tipográficas estrictamente en base a sus características formales, 


sin atender al momento en el que fueron creadas o a su contexto histórico. 
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Para ello se han definido varias características visuales a cada una de las cuales 


les corresponde un dígito que se aplica a un valor en una escala. 


La primera versión del sistema PANOSE fue definida por Benjamin Bauer- 
meister en 1985 (publicada en 1988) y se fue desarrollando en años posteriores 
mejorando su capacidad descriptiva (añadiendo dígitos) a la vez que se desa- 
rrollaban aplicaciones para ser usadas en metadatos o sistemas de clasificación 
automatizados. La especificación PANOSE 2.0 se presentó en 1993. En 1995 
Hewlett Packard, que lo usa como tecnología de reconocimiento de fuentes 


para impresora, adquirió el sistema. 


La especificación PANOSE 1.0 tiene 10 dígitos. El primer dígito define la clase 
de familia y los 9 siguientes sirven para definir diversos aspectos formales. Así 
para una familia tipográfica del alfabeto latino los 10 dígitos corresponderían 


a las características siguientes. 
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Digito/Característica Escala de parámetros 


1. Clase de familia 


2. Tipo de remate 


3. Peso 


4. Proporciones 


5. Contraste 


0. Any 
1. No Fit 
2. Latin Text 


3. Latin Hand Written 


4. Latin Decorative 
5. Latin Symbol 


En este caso elegimos 2 (Latin Text) y 


esto define las 9 características 


siguientes. 


0. Any 

1. No Fit 

2. Cove 

3. Obtuse Cove 
4. Square Cove 


5. Obtuse Square Cove 


6. Square 

7. Thin 

8. Oval 

9. Exaggerated 
10. Triangle 

11. Normal Sans 
12. Obtuse Sans 


13. Perpendicular Sans 


14. Flared 
15. Rounded 


0. Any 

1. No Fit 

2. Very Light 
3. Light 

4. Thin 

5. Book 

6. Medium 
7. Demi 

8. Bold 

9. Heavy 
10. Black 
11. Extra Black 


. Any 

. No fit 

. Old Style 
Modern 

. Even Width 

. Extended 

. Condensed 

. Very Extended 

. Very Condensed 
. Monospaced 


0OJDONADINaO 


Any 

No Fit 

None 

. Very Low 
Low 

Medium Low 
Medium 

. Medium High 
High 

. Very High 


OSADARUN O 
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6. Variación del trazo 


7. Estilo del brazo 


8. Forma de la letra 


9. Linea media 


10. Altura de x 


Any 

No Fit 

. No Variation 

. Gradual/Diagonal 

. Gradual/ Transitional 
. Gradual/Vertical 

. Gradual/Horizontal 
. Rapid/Vertical 

. Rapid/Horizontal 

. Instant/Vertical 

0. Instant/Horizontal 


2 00 AJDNADINO 


. Any 

. No Fit 

. Straight Arms/Horizontal 

. Straight Arms/Wedge 

. Straight Arms/Vertical 

. Straight Arms/Single Serif 
. Straight Arms/Double Serif 
. Non. Straight/Horizontal 

. Non-Straight/Wedge 

. Non-Straight/Vertical 

10. Non-Straight/'Single Serif 
11. Non-Straight/Double Serif 


. Any 

No Fit 

. Normal/Contact 
Normal/Weighted 

. Normal/Boxed 

. Normal/Flattened 

. Normal/Rounded 

. Normal/Off Center 
. Normal/Square 

9. Oblique/Contact 
10. Oblique/Weighted 
11. Oblique/Boxed 
12. Oblique/Flattened 
13. Oblique/Rounded 
14. Oblique/Off Center 
15. Oblique/Square 


O00ADAOAWINO 


. Any 

. No Fit 

. Standard/Trimmed 
. Standard/Pointed 
. Standard/Serifed 

. High/Trimmed 

. High/Pointed 

. High/Serifed 

. Constant/Trimmed 
. Constant/Pointed 
10. Constant/Serifed 
11. Low/Trimmed 

12. Low/Pointed 

13. Low/Serifed 


. Any 

. No Fit 

. Constant/Small 

. Constant/Standard 
. Constant/Large 

. Ducking/Small 

. Ducking/Standard 
. Ducking/Large 


O 0 060 M6 w Mul a 


— 0004 GQhUhN OO 
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Cada una de las clases del primer dígito tiene sus propias características para 


los 9 dígitos siguientes con sus escalas de parámetros correspondientes. 


En el ejemplo siguiente se muestra cómo se aplica el sistema PANOSE para clasificar la 
familia tipográfica Times New Roman. 


Clase de familia 
Tipo de remate 
Peso 
Proporción 
Contraste 


Variación de trazo 


Estilo de brazo 
Forma de letra 


Línea media 


Altura-X 


2. Latin text (texto latino) 

2. Cove (Conexión con el asta suavizada por trazos redondeados) 
6. Medium (Medio) 

3. Modern (Moderno) 

5. Medium-low (Medio - bajo ) 


4. Gradual/Transitional (Gradual, de transición entre diagonal y 
vertical) 


5. Straight Arms/Single Serif (Brazos rectos, remate simple) 
2. Normal/Contact (Redonda) 


3. Standard/Pointed (altura estándar de línea media, terminal en 
punta de los trazos diagonales) 


4. Constant/Large (altura de caja alta constante, alta altura de x) 


Con PANOSE 2.0 se aumentó el número de dígitos, desdoblando o dividiendo 


cada una de las características en características más específicas. 


En la tabla siguiente se muestra la relación entre las características definidas 


en los dígitos de la versión 2.0 respecto a la versión 1.0. 
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Comparación características entre versiones 





PANOSE 1.0 


Family (Tipo de familia) 


Serif Style (Estilo de Serifa) 


Weight (Peso) 


Proportion (Proporción) 


Contrast (Contraste) 


Stroke (Variación de trazo) 


Arm Style (Estilo de brazo) 


Letterform (Forma de letra) 


Midline (Línea media) 


X-Height (Altura-X) 


PANOSE 2.0 


Class (clase) 
Genre (género) 


Serif Width Measure (Medida de anchura de Serifa) 

Serif Tall Measure (Medida de altura de Serifa) 

Serif Tip Measure (Medida de punta de Serifa) 

Serif Hip Roundness (Ovalización de la curva de Serifa) 

Serif Tip Roundness (Ovalización de la punta de Serifa) 

Serif Angle (Ángulo de Serifa) 

Serif Drop Measure (Medida de inclinación de Serifa) 

Serif Balance Measure (Medida de equilibrio de Serifa) 

Serif Foot Pitch Measure (Medida de inclinación del pie de Serifa) 
Serif Cup Measure (Medida de copa de Serifa) 


Weight Measure (Medida de peso) 


Monospace Flag (Bandera monoespacio) 
Distortion Measure (Medida de distorsión) 
Ratio Measure (Medida de ratio) 


Narrow Stem Measure (Medida de eje estrecho) 


Speed Factor (Factor de velocidad) 
Stress-up Angle (Angulo de trazo hacia arriba) 
Stress-low Angle (Angulo de trazo hacia abajo) 


Stem Taper Factor (Factor de estrechamiento del asta) 
Stem Dishing Measure (Medida de incurvación del asta) 
Stem Bowing Measure (Medida de curvatura del asta) 
Stem Termination Type (Tipo de terminación del asta) 
Stem Termination Angle (Ángulo de terminación del asta) 


Slant Angle (Ángulo de inclinación) 

Outer Curve Factor (Factor de curva exterior) 

Side Flat Factor (Factor de planicidad lateral) 

Top Flat Factor (Factor de planicidad superior) 
Bowl Mid-out Measure (Medida del anillo del medio 
hacia afuera) 


Mid “E” Measure (Medida de media E) 
Mid “A' Measure (Medida de media A) 
Apex Trim factor (Factor de recorte del ápice) 
Apex Serif Flag (Bandera de Serifa del ápice) 


X-Tall Measure (Medida de altura X) 
Diacritical Location (Situación diacrítica) 
Cap-Scale Factor (Factor escala de la capitular) 


Como se puede ver, el sistema PANOSE parte de un análisis formal muy pre- 


ciso que consigue parametrizar. Su uso práctico es incontestable, este sistema 


es la base de tecnologías de reconocimiento de caracteres y de clasificación 


por parte de impresoras, software de edición, software de web y sistemas de 


metadatos. 
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Pero al no ofrecer una lista reducida de categorías y expresar su clasificación 
con códigos numéricos resulta poco útil como una forma de referirse a las 
fuentes en la comunicación habitual entre creadores gráficos. Sí que puede re- 
sultar muy útil, en cambio, para analizar y comparar fuentes que deban com- 


binarse o modificarse. 


¿Por qué PANOSE? 


La denominación PANOSE la acuñó Benjamin Bauermeister, creador inicial del sistema, 
a partir de dividir las letras del alfabeto latino en 6 grupos y luego elegir una letra de cada 
grupo, de manera que formaran una palabra pronunciable. Los grupos son los siguientes 
(se destaca en negrita la letra elegida en cada grupo: 


e Letras con esquinas rectas y partes redondas: (B, D, J, P, R). 
e Letras con diagonales: (A, V, W, Z). 

e Letras cuadradas: (H, K, M, N, X). 

e Letras redondas: (C, G, O, Q). 

e Letras semi-redondas: (S, U). 

e Letras semi-cuadradas: (E, F, L, T, Y). 


3.8. Combinar fuentes tipográficas 


"El tipógrafo novel que tenga que proyectar un libro tendría que empezar por explorar en 
primer lugar las posibilidades que ofrece la unidad tipográfica [el uso de una sola familia 
tipográfica], y sólo tendría que pasar a combinar tipos distintos cuando su gusto se haya 
consolidado y depurado. (...) Un libro donde se utilice un solo tipo será en el peor de 
los casos solamente mediocre; el error en la combinación de familias produce resultados 
nauseabundos." 


Josep M. Pujol; Joan Solà (1995). Ortotipografia; manual de l'autoeditor i el dissenyador grà- 


11 
fic . Barcelona: Columna. 


Esta cita puede ser extremadamente normativa, pero en líneas generales es 
un buen consejo para cualquier producto gráfico el usar una o máximo dos 


tipografías. Si éste es el caso, los mismos autores recomiendan: 


"Cuando se combinan dos tipografías hay que evitar el peligro de caer en la ambigüedad: 
tienen que ser familias bien contrastadas". 


Josep M. Pujol; Joan Solà (1995). Ortotipografia; manual de l'autoeditor i el dissenyador grà- 
p J p y 
fic?’ Barcelona: Columna. 


Dos letras que combinan Dos letras que no combinan 
Frutiger Méridien 
Méridien Times 


Combinar tipografías 








(cita traducida del original en 
catalán. 











02Cita traducida del original en 
catalán. 
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3.9. Composición de texto: letras, palabras, líneas 


3.9.1. El tamaño 


El tamaño de una fuente tipográfica no depende ni de la altura de la caja alta, 
ni de la altura de ascendentes ni de la altura de x. Depende de la altura del 
cuerpo. El cuerpo es un recuadro de igual altura para todas las letras que en 
los tipos metálicos correspondía al tamaño de la pieza. El tamaño del cuerpo 


se mide en puntos. 


Si usamos dos familias tipográficas, el mismo tamaño de cuerpo puede no ser 
equivalente a un tamaño aparente igual para las dos. La diferencia entre altura 
de x, altura de ascendentes y forma de la letra puede hacer que una tipografía 
parezca mayor que otra que está al mismo tamaño. En este caso, es mejor 


guiarnos por nuestra impresión visual. 


3.9.2. Unidades físicas para medir tipos Cuerpo 


"Durante más de 250 años después de la invención de los tipos móviles que realizara 
Gutenberg, cada fundición produjo tipos con sus propias especificaciones y tamaños, 
lo cual significaba que un tipo no era intercambiable entre una fundición y otra. En 
respuesta a esta situación caótica, el grabador francés Pierre Simon Fournier formuló el 
sistema de puntos en 1737." 


Representación esquemática de un tipo 
de imprenta 


Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume. 


El sistema de puntos, modificado por Firmin Didot en 1785 que definió el 
punto en 0,0148 pulgadas (0,03759 cm), es el usado en Europa continental. 
En Gran Bretaña y EUA se emplea un sistema creado en 1870 que define el 
punto en 0,0138 pulgadas (0,03505 cm). 


Si el punto es la unidad básica, el cícero es la unidad mayor. 12 puntos equiva- 
len a un cícero. En los países anglosajones 12 de sus puntos son una pica. Para 
hacer la correspondencia se puede decir que una distancia de 14 puntos Didot 


europeos continentales equivale a una distancia de 15 puntos anglosajones. 


El cícero se llama así en España, Francia y Alemania; en Italia a la misma 


medida la llaman riga y augustijn o aug en Holanda. 
3.9.3. El tamaño del tipo en pantalla 
En las pantallas de ordenador no podemos usar medidas físicas para medir los 


tipos ya que el tamaño de la pantalla donde se va a ver y su relación con la 


resolución de la imagen no podemos saberla de antemano. 
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Lo que se puede controlar en relación a los gráficos que deben ser vistos en 
pantalla es el número de píxeles que ocupa un determinado elemento. Los 
píxeles son pues la medida para trabajos que deben ser vistos en pantalla. 
En consecuencia los programas de gráficos de mapa de bits permiten usar los 
píxeles como medida para los tipos de texto. 


En lo referente a formatos vectoriales (SWF, SVG, PDF) los programas de gráfi- 
cos normalmente permiten elegir entre diferentes unidades de medida, tanto 
píxeles como físicas. De hecho, estos formatos permiten ampliación sin pér- 
dida de calidad por lo que el tamaño del texto es más importante en relación 
a otros textos o elementos de la composición que no por un problema de re- 


soluciones. 


Cuando el texto no está integrado en un gráfico sino que se mantiene como 
tal tenemos otro tipo de medidas relativas que ofrecen un mayor control de 
tamaño al usuario-lector y un control aceptable de las jerarquías al diseñador. 
Este es el caso del texto en la web. 


3.9.4. El tamaño del tipo en la web 


Las nuevas especificaciones del W3 Consortium a partir de mediados de los 
años noventa configuraron una serie de características nuevas para la web en- 
tre las que cabe destacar la separación entre estructura y apariencia. La página 
HTML proporciona la estructura o soporte del contenido para la página. Y las 
hojas de estilo (CSS) ofrecen el control de su apariencia. Con las hojas de es- 
tilo es posible definir todos los aspectos visuales de una web. Desde el tamaño 
(absoluto o relativo) y las características de los textos hasta el color, tipo de 
línea, posición O tamaño de los elementos gráficos o bloques de contenido. 


Si queremos usar medidas absolutas en la web podemos definir tamaños de 
letras usando píxeles ("px") como unidades. Con "px" definimos que algo (un 
texto, un párrafo) tiene un tamaño determinado en píxeles en pantalla. Pero 
esa pantalla, dependiendo del monitor utilizado, puede ser de tamaños distin- 
tos y la resolución puede estar definida con distintas configuraciones. Quizás 
el observador necesita cambiar los tamaños por cuestiones del contexto en que 
lo visualiza (dispositivo de pantalla pequeña, luz del sol reflejada en pantalla) 
O de sus (dis)capacidades visuales, si fijamos las medidas como absolutas se lo 
estamos dificultando. 


La alternativa es usar medidas relativas. Las tenemos como porcentajes (%) y 
variaciones de la altura de M (em) y la altura de x (ex). Podemos usar medidas 
relativas en los contenedores, en sus bordes, márgenes y espaciado interno. 


También como tamaño para el texto. 
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3.9.5. El tamaño relativo en la web 


¿En función de qué damos un porcentaje? 


Los porcentajes quedan determinados en función del contenedor padre. 
Para un párrafo que esté directamente en una página un valor de 50% 
(<p style="width: 50%">) significa que ocupará la mitad de la página. El 
mismo párrafo dentro de un contenedor "div" que mida 500 píxeles me- 
dirá la mitad del "div", o sea 250 píxeles (<div «style="width: 500px" 
style="width:50%">). Porque el "div" es su contenedor "padre". 


Si definimos el tamaño de una fuente a 180% ("font-size:180%") y la fuen- 
te está directamente en una página, estaremos definiendo un porcentaje en 
función de lo que el usuario ha elegido como tamaño medio en las preferen- 
cias de su navegador (Firefox, IExplorer, Safari, ...). Si no ha elegido nada será 
un 180% del tamaño medio por defecto definido por los desarrolladores del 


programa. 


Si el texto está dentro de un párrafo que tiene definido a su vez un tamaño 
de fuente, cuando modificamos otra vez el tamaño lo hacemos en función de 


ese valor. 


Y esto es válido también para las medidas "em" y "ex": 


e La altura de M es en la tradición tipográfica el tamaño de una "M" ma- 
yúscula en caja alta. Su equivalente en CSS es "em" y se refiere al tamaño 
del tipo. No podemos tomarlo estrictamente como el tamaño de la "M". 
Pero sí es una medida muy útil que podemos usar tanto horizontal como 


verticalmente. 


e La altura de x es en la tradición tipográfica el tamaño de la "x" minúscula 
en caja baja. Su equivalente en CSS es "ex". Como se ha visto la altura de 


"x" no es igual y varía según la fuente tipográfica. 


3.9.6. Espaciado del tipo 


El espaciado de un carácter se define por el cuadratín, cuyo tamaño 


tiene que ver con el del cuerpo. 


"En un sistema básico de 18 unidades, una "M" de caja alta (la letra más ancha) tiene 18 
unidades, la "o" de caja baja, 10 unidades y la "i" e caja baja, 4 unidades." 


Perfect (1992) 
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Así pues el ancho de la "M" definía el alto del tipo y de su división se extraían 
las unidades para medir el resto de las letras. Además, esa medida, llamada 
cuadratín, se usaba para espacios en blanco horizontales, para caracteres como 
el guión largo (que mide un cuadratín) y para espacios más estrechos de medio 
cuadratín o un cuarto de cuadratín. El hecho de usar múltiples y divisores de 
una misma medida ayuda a dar coherencia tanto al diseño como a la aplica- 


ción tipográfica. 


Existen fuentes tipográficas que conservan el mismo tamaño para todos los 
caracteres, son las conocidas como Mono o Monoespaciadas (en inglés mo- 
notype). Estas letras derivan de la necesidad que había en las máquinas de es- 
cribir mecánicas convencionales de mantener la misma distancia para cada 
carácter. También se usaron en los primeros ordenadores. El resultado es una 
fuente descompensada proporcionalmente entre caracteres. Algunas fuentes 


monoespaciadas comunes son la Courier, la Monaco o la Monotxt. 


Mo! 






3.9.7. Interletrado y espaciado entre palabras 





Garamond 


El espaciado entre letras (también llamado interletrado, intercarácter o, en 
inglés, tracking) determina la regularidad del texto y no es igual para todas 
las combinaciones de letras. Los sistemas digitales suelen permitir modificarlo. 
Los sistemas más simples permiten sólo tres niveles indefinidos: "compacto", 
"normal" y "amplio" (o "extendido"). Pero la mayor parte de sistemas de auto- 
edición y procesadores de texto permiten controlar esta distancia por valores 
numéricos. También las hojas de estilo CSS para la web permiten definir este 


parámetro. 
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El espaciado entre palabras tiene que permitir una lectura fluida, ni dema- 
siado ancho ni demasiado estrecho. Por regla general, corresponde al ancho 
de una letra de espaciado medio como la "a", la "r" o la "n" de caja baja. 


3.9.8. El cran 


Las letras que dejan mucho espacio blanco (como la "T" de caja alta) visual- 
mente crean una separación respecto a la letra anterior o la siguiente. Esto se 
corrige superponiendo una letra en el espacio horizontal de la otra. Es lo que 
se llama el cran (en inglés kern) y originalmente era una muesca en el tipo 
metálico. Actualmente, es una corrección que suele estar programada infor- 
máticamente y que, en caso que no lo esté, podemos modificar con un inter- 


letrado de valor negativo. 


sn AGUA Te 
cnn AGUA Te 


El cran es la superposición de una letra en el espacio horizontal de otra letra 
adjunta para evitar los desagradables espacios vacíos. 


¿Qué es el kerning? 


Los diseñadores suelen hablar de kerning para referirse al ajuste del cran o al interletrado 
negativo entre dos letras. El término kerning es en inglés el participio del verbo to kern. 
Kerning adjustment sería el ajuste de interletrado o ajuste del kern y para abreviar ha que- 
dado sólo en kerning. 


Resumiendo: 


e Kern: término inglés para el cran (el término en castellano deriva del que se usa en 
francés). Espacio de una letra que entra en el de otra contigua, originariamente era 
una muesca en el tipo. 


e To kern: Ajustar el espacio horizontal entre un par de letras. El verbo no tiene equi- 
valente en castellano. 


e Kerning: abreviación del inglés kerning adjustment; ajuste del cran entre dos letras. 


Por razones físicas, en la tipografía tradicional ajustar el cran (kerning) o am- 
pliar el interletrado (tracking) era algo distinto. En el primer caso usar una 
muesca en el tipo, en el segundo insertar tipos blancos de espaciado. En la 
tipografía digital ya no existe esta distinción, por lo que podemos hablar de 
interletrado positivo (ajustar espacio entre letras sin que entren unas dentro de 
otras, tracking) o interletrado negativo (estrechar el espacio entre letras hasta 
que unas entren dentro del espacio de otras, kerning). 
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3.9.9. Interlineado 


El interlineado es el espacio entre una línea de texto y la siguiente. Si 
no se inserta un espacio vertical adicional entre líneas de tipo, se dice 


que la composición es sólida: a un cuerpo 14, un interlineado 14. 


Los valores del interlineado se refieren a la suma del tamaño del cuerpo más el 
espacio intermedio. En la composición manual se añadía espacio entre líneas 
insertando tiras de plomo. 14/14 significa que los cuerpos de una línea se tocan 
con las de abajo. 14/16 que hay 2 puntos entre los cuerpos. 14/13 que los 
cuerpos de las dos líneas se superponen. 


El interlineado tiene que evitar que los ascendentes y descendentes lleguen 
prácticamente a tocarse creando un texto de apariencia compacta y de difícil 
lectura. El interlineado mínimo habitual (dependiendo de la familia) suele ser 
a partir de un punto mayor que el cuerpo y un máximo de tres puntos. Depen- 
derá de cada fuente tipográfica, pero tener presente que usar un interlineado 
demasiado grande también dificultaría la lectura. 


Lorem ipsum ad vel mt facer, moderatius disputando eos cu. Falli prompta vis an, ius no everti ullamcorper. Ut 
eam dicant omnium meliore. Corpora volutpat vulputate ex pri, eu euismod posidonium voluptatibus quo, an error 
epicuri dissentiunt eam. Primis fierent noluisse at qui, dicit tollit phaedrum cum te, mel erat probo omnis id. 
Aliquam dissentias at pri, sea saepe gubergren ne. Rebum iuvaref eu eum. 


Cuerpo 14, interlineado 11 


Lorem ipsum ad vel fugit facer, moderatius disputando eos cu. Falli prompta vis an, ius no everti ullamcorper. Ut 
eam dicant omnium meliore. Corpora volutpat vulputate ex pri, eu euismod posidonium voluptatibus quo, an error 
epicuri dissentiunt eam. Primis fierent noluisse at qui, dicit tollit phaedrum cum te, mel erat probo omnis id. 
Aliquam dissentias at pri, sea saepe gubergren ne. Rebum iuvaret eu eum. 


Cuerpo 14, interlineado 14 

Lorem ipsum ad vel fugit facer, moderatius disputando eos cu. Falli prompta vis an, ius no everti ullamcorper. Ut 
eam dicant omnium meliore. Corpora volutpat vulputate ex pri, eu euismod posidonium voluptatibus quo, an error 
epicuri dissentiunt eam. Primis fierent noluisse at qui, dicit tollit phaedrum cum te, mel erat probo omnis id. 


Aliquam dissentias at pri, sea saepe gubergren ne. Rebum iuvaret eu eum. 


Cuerpo 14, interlineado 16 


Ejemplos de interlineados 


3.10. Composición de texto: columnas y páginas 


3.10.1. Ancho de columna 


El texto se suele dividir en columnas dentro de una misma composición. La 
anchura de éstas depende del tamaño del texto y de la familia tipográfica. Entre 
60 y 65 caracteres suele ser una opción correcta. El ancho entre columnas o 
canal es relativamente libre y afecta en gran medida a la composición general 


de la página. 
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Lorem ipsum jid feugiat officiis 
scriptorem vel, ne ius veniam decore 
penculis Essent eripuit petentium at 
sad, in ferri quando conclusionemque 
vel, cos in esse laboramus foronsibus 
Ei est isque aliquip nusquam, brute 
quidam no per. Sea cx swt velit, 
mutat melius sapientem vim ci, Fam 
ad ludus graeci temporibus, ci putent 
debitis partiendo qui, per alii regione 
conclusionemque ct Quod pericula 
ar qua Ei est libris  evertitur 
percipitur, ne cum fugit nostrum 
voluptua, per ex falli mundi oporteat, 


Lorem ipsum id feugiat officiis scriptorem vel, ne ins 
veniam decore periculis, Essent eripuit petentium at 
sed, in ferri quando conclusionemque vel, cos in esse 
laboramus forensibus Ei cst isque aliquip nusquam, 
brute quidam no per. Sea ex stet velit, mutat melius 
sapientem vim ci, Fam ad ludus graeci temporibus, 
ci purent debits pariendo qui, per alii regione 
conclusionemque ct Quod pericula ar quo Fi est 
libris evertitur percipitur, ne cum fugit nostrum 
voluptua, per ex falli mundi oporteat, 


1d pro deber simul forensibus, es alii possit torquatos 
sea. An vis solum molestiac, duo et facer definicbas, 
vel noluisse ploriarur cu. Ullum vivendo sit te, 


Lorem ipsum id feugiat officiis semprorem vel, ne ius veniam decore periculis. 
Essent eripuit petentium at sed, in ferri quando conclusionermque vel, cos in 
esse laboramus forensibus, Ei cst iisque aliquip nusquam, brute quidam no per. 
Sca ex set velin, mutat melius sapiemem vim ci, Eam ad ludus pracci 
temporibus, ci putent debitis partiendo qui, per alii regione conclusionemque 
et. Quod pericula at quo, Ei est libris evertitur percipitur, ne cum fugit nostrum 
voluptua, per ex falli mundi oporteat. 


ld pro debet simul forensibus, ci alii possie torquatos sea. An vis solum 
molestiac, duo et facer defnicbas, vel noluisse gloriatur cu. Ullum vivendo sit 
te, mel liber antiopam oportere cu, choro prodesset vituperata id pei 1d quem 
iogimus reprchendunt cum, latine nostrud mandamus his no, cum perfecto 
accusamus quaerendum ea. At cum stet legere civibus, eros commodo deleniti 
sca ct. In prompta aliquyam cam, congue probamus ocurreret vis ne, 


Ancho de columna 


3.10.2. Alineación 


En toda composición tipográfica se forma una rejilla base imaginaria donde se 
asientan los tipos. En base a ella podemos alinear las líneas. El texto se puede 
alinear a la derecha, a la izquierda, en el centro de manera simétrica, justificado 


o componerlo de forma asimétrica. 


Alineación 
Alineado a la Lorem ipsum id feugiat officiis scriptorem vel, ne ius veniam decore periculis. 
izquierda Essent eripuit petentium at sed, in ferri quando conclusionemque vel, cos in esse 
laboramus forensibus. Ei est iisque aliquip nusquam, brute quidam no per. Sea 
ex stet velit, mutat melius sapientem vim ei. Eam ad ludus graeci temporibus, ei 


Alineado a la putent debitis partiendo qui, per alii regione conclusionemque et. Quod pericula 
derecha at quo. Ei est libris evertitur percipitur, ne eum fugit nostrum voluptua, per ex 
falli mundi oporteat. 
Texto a re er ai A e : A EE 
ao pro debet simul forensibus, ei alii possit torquatos sea. An vis solum 
molestiae, duo et facer definiebas, vel noluisse gloriatur cu. Ullum vivendo sit te, 
mel liber antiopam oportere cu, choro prodesset vituperata id pri. Id quem 
Texto legimus reprehendunt eum, latine nostrud mandamus his no, eum perfecto 
justificado accusamus quaerendum ea. Át cum stet legere civibus, eros commodo deleniti 
sea et, 
Texto 
asimétrico O 


La alineación a la izquierda es bastante habitual. En este caso se dice que for- 


ma bandera hacia la derecha (como si estuviera atado a un mástil a izquierda). 


La alineación a la derecha se usa menos, porque es más difícil encontrar en 
ella el principio de la línea siguiente. Se suele usar en pies de foto cuando la 


imagen se encuentra en la derecha. 


El texto centrado presenta gran dificultad de lectura continua, pero produce, 


por su simetría, un efecto de composición clásica que puede ser interesante. 


Justificado significa que el texto está alineado a la izquierda y a la derecha. 
El lector no tiene dificultad en encontrar la línea siguiente y el texto puede 
tratarse a nivel compositivo como un bloque regular. ¿Cómo se consigue el 


justificado? Aumentando el interletrado y el espacio entre palabras (esto está 
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automatizado en los sistemas informáticos). El resultado puede ser contrapro- 
ducente si la columna es estrecha y se producen espaciados que fragmentan 


el texto al ser más anchos que el interlineado. 


Componer el texto de forma asimétrica puede tener un efecto visual intere- 
sante. En cuanto al contenido, es evidente que dificulta la lectura, pero puede 
reforzarlo en un texto de tipo poético si la fragmentación está estudiada y re- 
fuerza el sentido y ritmo del texto. 


3.10.3. División del texto 


El texto se divide en párrafos. Los párrafos se pueden distinguir entre sí aña- 
diendo una separación mayor al interlineado habitual. Esta separación no tie- 
ne que llegar a ser tan ancha como una línea en blanco, porque el texto que- 
daría demasiado fragmentado. La mayoría de programas de composición de 
texto permiten añadir un espaciado anterior o posterior al párrafo con valores 


medidos por puntos, porcentajes o cualquier otra unidad de texto. 


Otra forma de diferenciar el párrafo es usar las llamadas sangrías: la inserción 
de un espacio en la primera línea del párrafo. La tradición editorial dice que 
éste tiene que ser de entre 1 y 2 cuadratines y que no tiene que usarse en el 


primer párrafo de un capítulo o en el primero después de un título. 


Ejemplos de párrafo 


Lo i id feugis 
Espació de media rem ipsum id feugiat 


; Ei est iisque aliquip nusquam, brute quidam no per. Sea ex stet velit, mutat 
línea entre párrafos q Ruano; quid per. è , 


melius sapientem vim ei. Eam ad ludus graeci temporibus, el putent debitis 
partiendo qui, per alii regione conclusionemque et. Quod pericula at quo. 


Sangrado a partir del Ei est libris evertitur percipitur, ne eum fugit nostrum voluptua, per ex falli 
segundo pårrafo. mundi oporteat. 
Sin espacio entre Id pro debet simul forensibus, el alii possit torquatos sea. An vis solum 
p , P q 
párrafos molestiae, duo et facer definiebas, vel noluisse gloriatur cu. Ullum vivendo 


sit te, mel liber antiopam oportere cu, choro prodesset vituperata id pri. Id 
quem legimus reprehendunt cum, latine nostrud mandamus his no, cum 
perfecto accusamus quaerendum ea. At cum stet legere civibus, eros. 


Sangrado colgante 
o sangría francesa y 
espacio medio entre 

párrafos 


3.10.4. Composición de página 


Tanto en los productos impresos como en los de soporte digital que se pre- 
sentan en pantalla, hay un espacio delimitado que actúa como marco de la 
composición. Dentro de él se compone el texto, combinado si cabe con otros 


elementos visuales. 


Un aspecto a tener en cuenta es la determinación de los márgenes entre el 
límite del marco y el área donde se dispone el texto. Para definirlos se tendrán 
en cuenta las proporciones generales del marco y las proporciones de los már- 
genes entre sí. Es habitual dejar un margen mayor abajo que arriba y menor 
en los lados. Si se trata de un libro, el espacio será distinto en la parte exterior e 
interior. En libros y revistas la doble página se percibe como una composición 
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integrada y se considera el margen interior como la suma de los de las dos 
páginas contiguas. La composición en doble página tiende a ser simétrica en 


productos convencionales. 


Disponer un elemento en el límite del marco no es habitual; cuando se hace 
se dice que está a sangre porque está en la línea donde la guillotina corta 
el papel en un producto impreso. En estos casos el elemento se extiende un 
poco fuera del papel (en la zona de sangrado, ajustable en los programas de 
diseño y autoedición) por si la guillotina tuviera un pequeño desplazamiento. 
A sangre pueden estar las imágenes y en algún caso los textos si se trata de 
titulares. No se hará con los textos continuos a no ser que se quiera dificultar 


deliberadamente su legibilidad. 


Como recurso para la composición coherente de texto y su combinación con 
imágenes suelen usarse retículas invisibles. Las imágenes se ajustan de forma 


que ocupen una o varias columnas de texto o bien divisiones regulares de ellas. 


3.10.5. Textura y color del texto 


Independientemente del color de las letras existe un color global de los bloques 
de texto que varía en función de la familia tipográfica, el estilo, el tamaño, el 
interlineado, el espaciado y otros factores. 


Tradición tipográfica frente a hipertexto 


El diseño editorial es una disciplina con una importante tradición heredada de las artes 
del libro. En ella hay gran cantidad de usos y convenciones que conviene tener en cuenta 
para seguir o transformar. La introducción del hipertexto introduce nuevos elementos 
para la organización gráfica del texto. 


Merece la pena recurrir a la bibliografía para estudiar a fondo estos temas. Un punto 
de partida puede ser el siguiente libro, un buen compendio de la tradición editorial y 
ortotipográfica: 


Pujol, Josep Ma; Sola, Joan (1995). Ortotipografia; manual de l'autor, l'autoeditor i el dissen- 
yador grafic. Barcelona: Columna. 


La interacción entre el color de las letras y el del fondo produce un 


efecto de mezcla partitiva percibiéndose como un nuevo color. 


En composiciones en blanco y negro se habla de gris de página para referirse 
a este efecto que produce el texto. Un bloque de texto puede percibirse en su 


conjunto como un gris más claro o más oscuro. 


Autoedición 


La autoedición es el término con el que, a partir de los años ochenta del siglo Xx, se 
empezó a llamar al diseño y producción de material impreso (libros, revistas, carteles, ...) 
mediante ordenadores personales corrientes. La autoedición (en inglés DTP o Desktop 
publishing; edición de escritorio o de oficina) sustituyó a los sistemas de fotocomposición 
(basados en la reprografía y el uso de fotolitos basados en las técnicas fotográficas) que 
a su vez había sustituido a los tipos metálicos. 
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El nacimiento de la autoedición fue posible por la convergencia del ordenador personal 
con ratón e interfaz gráfica que representaban los Macintosh de Apple, la tecnología 
de impresoras de escritorio de Xerox y el Page Maker de Adobe como primer programa 
comercial de maquetación. 


El concepto tiene resonancias utópicas, ya que prefiguraba una situación en la que todo 
el mundo podría editar sus propios libros en su casa. De lo que no cabe duda es de que 
trasformó totalmente la industria de las artes gráficas y la prensa escrita. 


A finales de la misma década, el llamado software de autor era presentado con la misma 
filosofía democratizadora de la autoedición, esta vez con el objetivo de facilitar la crea- 
ción de programas interactivos y multimedia. 


Con el fenómeno de la Web 2.0, ya entrado el siglo XXI, aparecen servicios de base web 
(como Lulu.com o bubok.es) que facilitan a los autores la posibilidad de autoeditar sus 
libros ofreciendo al lector potencial la impresión y envío del libro a demanda. 


La forma de la letra también afecta al conjunto generando distintos ti- 


pos de textura que sugieren sensaciones táctiles. 


10 12 16 Negrita Cursiva Normal Verdana Times Futura 


Lorem ipsum perfecto repudiandae id mea, ius et alii vidit fugit, ei duo illum aliquyam. Ad meis albucius 
noluisse mea, graeco persius vim et. Quo nibh mollis oportere te. Per vero expetenda assentior ea, vidisse 
mediocrem definitionem et per. Quot ipsum tantas in sit, singulis platonem eum ex, cum nostrum 
elaboraret ei. 


Vix in alía ponderum conclusionemque, eirmod lobortis cu quo. Has no harum nullam takimata, te vim 
aperiri eligendi. Qui reprimique quaerendum deterruisset no, ei odio delenit theophrastus pro. Ei mei dicit 
aliquando vituperata. Possit aliquip habemus in vim, duo ad porro everti option, ea vix cetero eruditi 


molestie. 


Postea numquam consetetur ut mei, id per aliquam mediocrem, at ius ocurreret principes. Ut vim omnes 
fastidii forensibus, amet malis ne nam. Has ea rebum animal neglegentur, assum consul dolores ut cum, 


ceteros percipitur mea ea. l 


Clicar sobre las diferentes opciones para comprobar cómo cambia el aspecto del texto. 
3.11. Legibilidad y amenidad 


"Por legibilidad entendemos la facilidad con la que las palabras pueden leerse cómoda- 
mente, a una velocidad normal de lectura." 


Christopher Perfect (1992). Guía completa de la tipografía. Barcelona: Blume. 


"La legibilidad se usa generalmente para designar la calidad de la diferenciación entre 
los caracteres, es decir, la claridad de las letras individuales. La amenidad de estilo es la 
calidad de lectura proporcionada por una obra tipográfica en la que lo apretado del texto, 
el interlineado y otros factores tienen una influencia decisiva en la función del tipo." 


Lewis Blackwell (1998). Tipografía del siglo XX. Remix. Barcelona: Gustavo Gili. 


3.11.1. Legibilidad 


Son varios los aspectos que pueden influir en la legibilidad de un texto. A 


continuación se citan y comentan algunos. 
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El diseño del tipo: las familias que consiguen mayor diferenciación entre ca- 
racteres parecen ser más legibles. Si el diseño de letras es muy homogéneo di- 
ficulta la lectura. Los tipos tienen que ser gráficamente coherentes pero dife- 


renciados. 


AOCOIMENMOS 
ANRSCIMOSO NOGEZARRO 
ONIOENSOM CONOCE 

CROS NAOIRARSM 

CNOQUDOSCUING IQIS 

VONMO MOOCH 

MQEDE IVAN 

OOC SOA 


Adalb Carl Fischl (1900). Esta imagen se reproduce acogiéndose al derecho de 
cita o reseña (art. 32 LPI), y está excluida de la licencia por defecto de estos 
materiales. 





Un caso extremo de ilegibilidad provocada por un exceso de similitud entre letras. Se 
trata de un diseño de Adalb Carl Fischl (1871-1937) de 1900 que "racionaliza" y reduce 
las formas del alfabeto mediante una composición coherente de ángulos y curvas. 


El experimento tiene un resultado estético interesante pero su aplicación produce una 

legibilidad muy baja. 
Serif o Sans serif: actualmente hay cierto consenso en que las tipografías con 
remates consiguen una mayor diferenciación entre letras y, en consecuencia, 
una mayor legibilidad, y suelen usarse en textos continuos. En rotulación (cat- 
teles, señales) suelen usarse familias tipográficas de palo seco ya que las con- 
diciones de lectura (a distancia, con condiciones de iluminación de todo tipo) 
requieren de una tipografía con gruesos que no se pierdan y con un fuerte 
contraste. Si se quiere usar el palo seco en bloques de texto las tipografías li- 
neales humanísticas ofrecen una opción con un nivel de diferenciación más 


alta que las otras lineales. 


Caja alta o baja: la caja alta tiene una alineación horizontal homogénea que 
uniformiza las letras. La caja baja, con caracteres más individualizados, ofrece 


menor dificultad de lectura. 


El estilo o peso: un peso medio es más legible que una fuente fina o negrita 
(aunque la negrita dentro de un texto normal llame la atención por su peso). 


Las fuentes cursivas pierden legibilidad por su inclinación. 


Anchura de la fuente: una fuente demasiado ancha o demasiado condensada 
pierde en legibilidad. Se suele usar el modo condensado para informaciones 


secundarias que tienen que ocupar poco espacio. 
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El soporte: las propiedades del soporte influyen en la legibilidad. La baja re- 
solución de las pantallas de televisión y de ordenador paradójicamente bajan 
la legibilidad de las tipografías con remate. Una baja calidad del papel de im- 
presión puede hacer necesarios tipos de trazo grueso y remates claros como 


los que tienen las fuentes de la familia de las egipcias. 
3.11.2. Amenidad 
Los siguientes aspectos influyen en la amenidad de lectura. 


Espaciado entre letras y palabras: un espaciado reducido puede percibirse 
como un amontonamiento de letras; si es demasiado amplio, puede fragmen- 


tar el texto. 


Tamaño del tipo: es evidente que influye en la lectura, aunque hay que valo- 
rarlo conjuntamente con el tipo de soporte y la familia tipográfica escogida. 
Generalizando de 9 a 12 puntos sería lo óptimo; 8 estaría en el límite y por 
debajo sería difícil de leer. Menos de 5 es casi ilegible. 14 es tolerable y por 


encima se acepta para titulares, pero es engorroso de leer en texto continuo. 


Ancho de columna: ya se ha dicho que un tamaño estándar podría ser en- 
tre 60 y 65 caracteres por columna. Una columna muy estrecha fragmenta 
el texto; en una demasiado ancha el lector encuentra con dificultad la línea 


siguiente. 


Interlineado: si es demasiado estrecho obtenemos un abarrotamiento de texto 
con ascendentes y descendentes demasiado próximas. Si es demasiado ancho, 
interrumpe continuamente la lectura, que obliga a atravesar continuamente 


espacios blancos. 


Lorem ipsum ut mucius 
noster comprehensam quo, et 
vim doctus omittantur, mel 
illum mandamus an. Dicat 
percipit nominati cum ea, ius 
zz1il eirmod appareat ea, mel 
aliquid bonorum reprimique 
bl blandit phaedrum 

uaestio est, utinam veritus 

eleniti pro id, has porro 
dolor causae te. e. 


Lorem ipsum ut mucius 
noster comprehensam quo, et 
vim doctus omittantur, mel 
illum mandamus an. Dicat 
percipit nominati cum ea, ius 
zzril eirmod appareat ea, mel 
aliquid bonorum reprimique 
te. Ei blandit phaedrum 
quaestio est, utinam veritus 
deleniti pro id, has porro 
dolor causae te. e. 


Lorem ipsum ut mucius 
noster comprehensam quo, et 
vim doctus omittantur, mei 
ilum mandamus an. Dicat 
percipit nominati cum ea, ius 
zzril eirmod appareat ea, mel 
aliquid bonorum reprimique 
te. Ei blandit phaedrum 
quaestio est, utinam veritus 
deleniti pro id, has porro 
dolor causae te. e. 


Interlineado 


Alineación: la alineación a la izquierda y la justificada son las más legibles. 
Para textos cortos se puede usar la centrada o la alineada a la derecha. La jus- 
tificada dificulta la amenidad de lectura si provoca demasiado espaciado entre 
palabras o un espaciado muy variable (esto suele pasar en columnas estrechas). 


Lorem ipsum ut mucius noster comprehensam quo 
Lorem ipsum ut mucius noster comprehensam quo 


Lorem ipsum ut mucius noster comprehensam quo 


Espaciado entre letras y palabras 
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Eirmod propriae Eum an Nam te Ea congue 

qualisque vel no, ta l e omnium deleniti 

ad quod debet detraxit, minimum pertinacia 

quidam quo, et ad sale euripidis, his, usu an 

augue tation patrioque eu solet populo 

aperiri nec. evertitur aeterno possit 

° d u o oporteat luptatum. 

Lorem ipsum... st sedin ln porto 
Homero s a l e forensibus 

Et agam habe- tractatos tibique repre- 

, mus appetere vix, consequat c o n - hendunt 

Lorem An phaedrum volut- ex eum, ceptam. mel. Sea 
ut mucius pat deterruisset impedit Has ne erat vid- 
AS ex quo, et cum eligendi ornatus i s s e 
prehensami vidit magna democri- oporteat voluptati- 
quo, et v accommodare. tum mea insolens. bus an, 
doet OR Eum an tale ad No V e 1] soluta 
ant e detraxit, ad sale ridens veniam nostrud 
Mam mática, patrioque ever- omittantur nostro scaevola 
E D ga titur duo. usu. Facer appellan- vix an. 
a do homero tut ad, his Id reque 
MOMA Homero tracta- tincidunt ex vide munere 
E tos consequat ex nec et, his omnesque est, at 


Contraste de color: la utilización de colores demasiado parecidos (de tono y 


sobre todo de luminosidad) entre el texto y el fondo dificultarán la amenidad 


de lectura. Hay que buscar un contraste fuerte: colores claros con oscuros, 


colores muy saturados con poco saturados. Para los contrastes de tono es mejor 


sumarlos a cambios en la luminosidad y la saturación, evitando combinar dos 


colores muy saturados que compiten entre sí y, especialmente, si crean un 


límite vibrante entre ellos. 


Buena legibilidad Legibilidad reducida 


= + 
Lorem ipsum id feugiat 


Ei est iisque aliquip nusquam, brute quidam no per. Sea ex stet velit, mutat 
melius sapientem vim ei. Eam ad ludus graeci temporibus, ei putent debitis 
partiendo qui, per alii regione conclusionemque et. Quod pericula at quo. Ei est 
libris evertitur percipitur, ne eum fugit nostrum voluptua, per ex falli mundi 
oporteat. 


Id pro debet simul forensibus, ei alii possit torquatos sea. An vis solum 
molestiae, duo et facer definiebas, vel noluisse gloriatur cu. Ullum vivendo sit 
te, mel liber antiopam oportere cu, choro prodesset vituperata id pri. Id quem 
legimus reprehendunt eum, latine nostrud mandamus his no, eum perfecto 
accusamus quaerendum ea. At cum stet legere civibus, eros commodo deleniti 


sea et. | 


Contraste de color 
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3.12. Expresividad 


Normal Cursiva Negrita 


a) b) 


q qa Fuerza 


Y 


a) Todas las familias tipográficas son similares, ya que forman parte del mismo alfabeto. Superpuestas muestran su estructura 
compartida, separadlas para ver los matices que las diferencian. 

b) Todas las familias tipográficas son gráficamente distintas y evocan distintas sensaciones. Elegid una tipografía para la palabra. 
Cambiad de palabra con un clic sobre ella. 


El texto es la plasmación gráfica de un lenguaje verbal. 


En consecuencia, transmite información como signo pero también como grá- 
fico. Tener en cuenta las propiedades gráficas de la tipografía y usarlas como 
vehículo de expresión no tiene por qué estar reñido con la legibilidad y la 
amenidad de lectura. Pero incluso para quien quiera traspasar las fronteras de 


la legibilidad, experimentando con las formas, las tipografías son interesantes. 


Plensa: tipografía en la práctica artística 


Muchos creadores han experimentado con el uso de los caracteres tipográficos con fi- 
nes artísticos, usándolos como formas, no como comunicación verbal. Son gráficos, son 
contornos, líneas, rectas, curvas, vacíos, rellenos... pero además, por su reconocimiento 
cultural, están dotados de una gran fuerza expresiva. 


La obra de Jaume Plensa es un ejemplo interesante de la incorporación de los caracteres 
tipográficos a la práctica artística. 
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Jaume Plensa (2005). Instalación Songs and Shadows. London: Albion Gallery. 
De wetwebwork, CC Reconocimiento-Compartir bajo la misma licencia 2.0 Genérica. 





Jaume Plensa (2009). Instalación Songs and Shadows. Praga: WE, Transparency 2009 
project. 
Foto de Arenamontanus en Flickr. CC Reconocimiento 2.0 Genérica. 


En muchos casos se pueden conseguir efectos altamente expresivos prescin- 


diendo de cualquier elemento visual que no sea tipográfico. 
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3.13. Tipografía digital 


La tipografía digital ha facilitado una disponibilidad y un control sobre la 
tipografía sin precedentes. Ello permite desplegar un gran potencial creativo 
pero también ha abierto, como dicen los tipógratos de oficio, la caja de Pan- 
dora de la disciplina. La posibilidad de ajustar cualquier parámetro permite 
variar propiedades y parámetros tipográficos sin tener en cuenta sus relaciones 


y sin prestar atención a los efectos que los ajustes puedan producir. 


Las fuentes digitales son archivos que se incorporan al sistema operativo y 
que contienen información para mostrar la tipografía en pantalla y para su 


impresión. 


En productos impresos hay que asegurarse de que el servicio que filma los 
fotolitos para la imprenta tiene las fuentes que se han usado en el documento. 


En productos para soporte digital hay que tener en cuenta que no todos los 
ordenadores tendrán las mismas tipografías. Algunos programas de autor, co- 
mo Flash, permiten convertir los textos en imágenes (trazados vectoriales o 
imágenes de mapa de bits) antes de compilar el interactivo en un archivo au- 
toejecutable. Esto será posible mientras no tengamos que hacer modificacio- 
nes en el texto durante su ejecución. También hay programas que permiten 


incrustar la fuente tipográfica en el documento. 


En HTML (el lenguaje de descripción de las páginas web) es posible crear una 
cascada de posibilidades tipográficas del tipo: "si el sistema tiene esta fuente, 
muestra el texto con ella, si no, muéstrala con tal otra, si no...". Los editores de 
páginas web, como Dreamweaver o KompoZer, ya crean este procedimiento 


automáticamente. 


En todo caso, conviene tener en cuenta cuáles son las tipografías más comunes 
que ya vienen incorporadas en los sistemas operativos o en las aplicaciones 


más difundidas. 
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